/* Masonry Gallery — Frontend
   CSS columns masonry; natural image aspect ratio
   Glossy look + Light / Dark themes
   Width 100%; 3–5 columns; hover overlay + top caption; lightbox
   ================================================================================ */

.mg-gallery {
	--mg-columns: 4;
	--mg-gap: 14px;
	--mg-radius: 14px;
	--mg-overlay: rgba(0, 0, 0, 0.35);
	--mg-caption-color: #ffffff;
	--mg-caption-size: 14px;
	--mg-font: inherit;
	--mg-icon-color: #ffffff;
	--mg-icon-size: 28px;

	/* Theme tokens (light defaults) */
	--mg-surface: #f4f6f8;
	--mg-frame: #ffffff;
	--mg-frame-border: rgba(15, 23, 42, 0.08);
	--mg-frame-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
	--mg-tile-bg: #e8edf2;
	--mg-tile-border: rgba(255, 255, 255, 0.65);
	--mg-tile-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
	--mg-tile-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.16), 0 6px 12px rgba(15, 23, 42, 0.08);
	--mg-shine: linear-gradient(
		125deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.12) 28%,
		rgba(255, 255, 255, 0) 48%
	);
	--mg-glass: rgba(255, 255, 255, 0.22);
	--mg-icon-glass: rgba(255, 255, 255, 0.28);
	--mg-icon-border: rgba(255, 255, 255, 0.55);

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--mg-font);
	color: #0f172a;
	padding: 0.35rem;
	border-radius: calc(var(--mg-radius) + 6px);
	background: transparent;
}

/* ---------- Themes ---------- */

.mg-gallery.mg-theme-light {
	--mg-surface: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
	--mg-frame: rgba(255, 255, 255, 0.72);
	--mg-frame-border: rgba(15, 23, 42, 0.07);
	--mg-frame-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
	--mg-tile-bg: #e7ecf2;
	--mg-tile-border: rgba(255, 255, 255, 0.7);
	--mg-tile-shadow: 0 10px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
	--mg-tile-shadow-hover: 0 20px 44px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.08);
	color: #0f172a;
}

.mg-gallery.mg-theme-dark {
	--mg-surface: linear-gradient(180deg, #151a22 0%, #0b0e13 100%);
	--mg-frame: rgba(22, 27, 36, 0.82);
	--mg-frame-border: rgba(255, 255, 255, 0.08);
	--mg-frame-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	--mg-tile-bg: #1a2030;
	--mg-tile-border: rgba(255, 255, 255, 0.12);
	--mg-tile-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
	--mg-tile-shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
	--mg-shine: linear-gradient(
		125deg,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.08) 26%,
		rgba(255, 255, 255, 0) 46%
	);
	--mg-glass: rgba(255, 255, 255, 0.1);
	--mg-icon-glass: rgba(255, 255, 255, 0.14);
	--mg-icon-border: rgba(255, 255, 255, 0.28);
	color: #e5e7eb;
}

/* Themed / glossy gallery frame */
.mg-gallery.mg-glossy {
	background: var(--mg-surface);
	border: 1px solid var(--mg-frame-border);
	box-shadow: var(--mg-frame-shadow);
	padding: clamp(0.65rem, 1.5vw, 1.1rem);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.mg-gallery.mg-theme-light.mg-glossy {
	background:
		radial-gradient(120% 80% at 10% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 55%),
		var(--mg-surface);
}

.mg-gallery.mg-theme-dark.mg-glossy {
	background:
		radial-gradient(100% 70% at 90% 0%, rgba(99, 120, 255, 0.12) 0%, transparent 50%),
		var(--mg-surface);
}

.mg-empty {
	padding: 2rem;
	text-align: center;
	background: #f6f7f7;
	border: 1px dashed #c3c4c7;
	color: #50575e;
	border-radius: 12px;
}

.mg-gallery.mg-theme-dark .mg-empty {
	background: #1a2030;
	border-color: #334155;
	color: #94a3b8;
}

.mg-grid {
	width: 100%;
	max-width: 100%;
	column-count: var(--mg-columns);
	column-gap: var(--mg-gap);
	box-sizing: border-box;
}

.mg-gallery.mg-cols-3 .mg-grid { column-count: 3; }
.mg-gallery.mg-cols-4 .mg-grid { column-count: 4; }
.mg-gallery.mg-cols-5 .mg-grid { column-count: 5; }

.mg-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 var(--mg-gap);
	padding: 0;
	width: 100%;
	display: block;
	position: relative;
	border-radius: var(--mg-radius);
	overflow: hidden;
	background: var(--mg-tile-bg);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

.mg-gallery.mg-glossy .mg-item {
	border: 1px solid var(--mg-tile-border);
	box-shadow: var(--mg-tile-shadow);
	/* Keep shine/shadow visible without clipping the outer glow too hard */
	background-clip: padding-box;
}

.mg-gallery.mg-glossy .mg-item:hover,
.mg-gallery.mg-glossy .mg-item:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--mg-tile-shadow-hover);
	z-index: 1;
}

.mg-item-link {
	display: block;
	position: relative;
	width: 100%;
	text-decoration: none !important;
	color: inherit;
	cursor: zoom-in;
	outline: none;
	border-radius: inherit;
	overflow: hidden;
}

.mg-item-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.mg-item-media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: inherit;
	/* aspect-ratio set inline from natural width/height */
	background: var(--mg-tile-bg);
}

.mg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	vertical-align: middle;
	border: 0;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.45s ease;
	transform: scale(1);
	filter: saturate(1.02) contrast(1.02);
}

.mg-gallery.mg-hover-zoom .mg-item-link:hover .mg-img,
.mg-gallery.mg-hover-zoom .mg-item-link:focus-visible .mg-img {
	transform: scale(1.07);
	filter: saturate(1.08) contrast(1.04) brightness(1.03);
}

/* Light color overlay — appears on hover */
.mg-overlay {
	position: absolute;
	inset: 0;
	background: var(--mg-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
	z-index: 1;
}

.mg-item-link:hover .mg-overlay,
.mg-item-link:focus-visible .mg-overlay,
.mg-item-link:focus-within .mg-overlay {
	opacity: 1;
}

/* Glossy shine sweep */
.mg-shine {
	position: absolute;
	inset: -20% -40%;
	background: var(--mg-shine);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transform: translateX(-30%) rotate(0.001deg);
	transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	mix-blend-mode: soft-light;
}

.mg-gallery.mg-glossy .mg-item-link:hover .mg-shine,
.mg-gallery.mg-glossy .mg-item-link:focus-visible .mg-shine {
	opacity: 1;
	transform: translateX(18%) rotate(0.001deg);
}

/* Always-on subtle top glass edge when glossy */
.mg-gallery.mg-glossy .mg-item-media::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 42%;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.06) 45%,
		transparent 100%
	);
	opacity: 0.85;
	mix-blend-mode: soft-light;
}

.mg-gallery.mg-theme-dark.mg-glossy .mg-item-media::after {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.16) 0%,
		rgba(255, 255, 255, 0.04) 40%,
		transparent 100%
	);
}

/* Centered hover icon */
.mg-hover-ui {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.88);
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mg-item-link:hover .mg-hover-ui,
.mg-item-link:focus-visible .mg-hover-ui {
	opacity: 1;
	transform: scale(1);
}

.mg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mg-icon-size) + 1.1rem);
	height: calc(var(--mg-icon-size) + 1.1rem);
	color: var(--mg-icon-color);
	border-radius: 999px;
	background: transparent;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.mg-gallery.mg-glossy .mg-icon {
	background: var(--mg-icon-glass);
	border: 1px solid var(--mg-icon-border);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.mg-icon svg {
	width: var(--mg-icon-size);
	height: var(--mg-icon-size);
	display: block;
}

/* Caption overlay — bottom of image on hover */
.mg-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	z-index: 5;
	margin: 0;
	padding: 1em 1em 0.9em;
	box-sizing: border-box;
	color: var(--mg-caption-color);
	font-size: var(--mg-caption-size);
	font-family: var(--mg-font);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
	pointer-events: none;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.58) 0%,
		rgba(0, 0, 0, 0.28) 55%,
		transparent 100%
	);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.mg-gallery.mg-glossy .mg-caption {
	background: linear-gradient(
		to top,
		rgba(8, 12, 20, 0.62) 0%,
		rgba(8, 12, 20, 0.22) 65%,
		transparent 100%
	);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mg-item-link:hover .mg-caption,
.mg-item-link:focus-visible .mg-caption {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Loading animations ---------- */

.mg-gallery.mg-anim-fade .mg-item,
.mg-gallery.mg-anim-fade-up .mg-item,
.mg-gallery.mg-anim-scale .mg-item,
.mg-gallery.mg-anim-stagger .mg-item {
	opacity: 0;
}

.mg-gallery.mg-anim-fade .mg-item.is-visible {
	animation: mg-fade 0.55s ease forwards;
}

.mg-gallery.mg-anim-fade-up .mg-item.is-visible {
	animation: mg-fade-up 0.55s ease forwards;
}

.mg-gallery.mg-anim-scale .mg-item.is-visible {
	animation: mg-scale 0.55s ease forwards;
}

.mg-gallery.mg-anim-stagger .mg-item.is-visible {
	animation: mg-fade-up 0.55s ease forwards;
	animation-delay: calc(var(--mg-stagger, 0) * 60ms);
}

.mg-gallery.mg-anim-none .mg-item {
	opacity: 1;
}

@keyframes mg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mg-fade-up {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mg-scale {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mg-img,
	.mg-overlay,
	.mg-hover-ui,
	.mg-caption,
	.mg-shine,
	.mg-item {
		transition: none !important;
	}

	.mg-gallery.mg-anim-fade .mg-item,
	.mg-gallery.mg-anim-fade-up .mg-item,
	.mg-gallery.mg-anim-scale .mg-item,
	.mg-gallery.mg-anim-stagger .mg-item,
	.mg-gallery.mg-anim-fade .mg-item.is-visible,
	.mg-gallery.mg-anim-fade-up .mg-item.is-visible,
	.mg-gallery.mg-anim-scale .mg-item.is-visible,
	.mg-gallery.mg-anim-stagger .mg-item.is-visible {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.mg-gallery.mg-hover-zoom .mg-item-link:hover .mg-img {
		transform: none;
	}

	.mg-gallery.mg-glossy .mg-item:hover {
		transform: none;
	}
}

/* ---------- Responsive columns ---------- */

@media (max-width: 1024px) {
	.mg-gallery.mg-cols-5 .mg-grid { column-count: 4; }
}

@media (max-width: 767px) {
	.mg-gallery.mg-cols-3 .mg-grid,
	.mg-gallery.mg-cols-4 .mg-grid,
	.mg-gallery.mg-cols-5 .mg-grid {
		column-count: 2;
	}

	.mg-caption {
		font-size: max(12px, calc(var(--mg-caption-size) * 0.92));
		padding: 0.65em 0.75em;
	}
}

@media (max-width: 480px) {
	.mg-gallery.mg-cols-3 .mg-grid,
	.mg-gallery.mg-cols-4 .mg-grid,
	.mg-gallery.mg-cols-5 .mg-grid {
		column-count: 1;
	}
}



/* ---------- Hover shake ---------- */

.mg-gallery.mg-hover-shake .mg-item-link:hover .mg-img,
.mg-gallery.mg-hover-shake .mg-item-link:focus-visible .mg-img {
	animation: mg-shake 0.55s ease-in-out;
}

/* When zoom + shake both on, shake wins on the image transform path */
.mg-gallery.mg-hover-shake.mg-hover-zoom .mg-item-link:hover .mg-img,
.mg-gallery.mg-hover-shake.mg-hover-zoom .mg-item-link:focus-visible .mg-img {
	animation: mg-shake-zoom 0.55s ease-in-out;
	transform: none;
}

@keyframes mg-shake {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	15% { transform: translate3d(-3px, 1px, 0) rotate(-0.6deg); }
	30% { transform: translate3d(3px, -1px, 0) rotate(0.6deg); }
	45% { transform: translate3d(-2px, 1px, 0) rotate(-0.4deg); }
	60% { transform: translate3d(2px, 0, 0) rotate(0.4deg); }
	75% { transform: translate3d(-1px, 0, 0) rotate(-0.2deg); }
}

@keyframes mg-shake-zoom {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05); }
	15% { transform: translate3d(-3px, 1px, 0) rotate(-0.55deg) scale(1.05); }
	30% { transform: translate3d(3px, -1px, 0) rotate(0.55deg) scale(1.06); }
	45% { transform: translate3d(-2px, 1px, 0) rotate(-0.35deg) scale(1.05); }
	60% { transform: translate3d(2px, 0, 0) rotate(0.35deg) scale(1.06); }
	75% { transform: translate3d(-1px, 0, 0) rotate(-0.2deg) scale(1.05); }
}

/* ---------- Justified layout ---------- */

.mg-gallery.mg-layout-justified .mg-grid {
	column-count: unset !important;
	display: block;
	width: 100%;
	font-size: 0; /* collapse whitespace between inline-blocks if any */
}

.mg-gallery.mg-layout-justified .mg-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	gap: var(--mg-gap);
	margin: 0 0 var(--mg-gap);
	box-sizing: border-box;
}

.mg-gallery.mg-layout-justified .mg-row:last-child {
	margin-bottom: 0;
}

.mg-gallery.mg-layout-justified .mg-item {
	break-inside: auto;
	margin: 0 !important;
	flex: 0 0 auto;
	height: var(--mg-row-h, var(--mg-row-height, 220px));
	width: var(--mg-item-w, auto);
	max-width: 100%;
}

.mg-gallery.mg-layout-justified .mg-item-media {
	height: 100%;
	aspect-ratio: auto !important;
}

.mg-gallery.mg-layout-justified .mg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-gallery.mg-layout-justified .mg-row.is-last:not(.is-full) {
	/* Last incomplete row: left-align, keep natural widths at target height */
	justify-content: flex-start;
}

/* Custom Breakdance SVG icons scale inside the glass circle */
.mg-icon svg {
	width: var(--mg-icon-size);
	height: var(--mg-icon-size);
	display: block;
	max-width: 100%;
	max-height: 100%;
}

/* ---------- Lightbox ---------- */

.mg-lightbox {
	--mg-lb-bg: rgba(8, 10, 14, 0.92);
	--mg-lb-btn: rgba(255, 255, 255, 0.12);
	--mg-lb-btn-hover: rgba(255, 255, 255, 0.22);
	--mg-lb-text: #f3f4f6;
	--mg-lb-muted: rgba(255, 255, 255, 0.72);
	--mg-lb-img-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
	--mg-lb-img-border: rgba(255, 255, 255, 0.12);

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mg-lb-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	padding: 1.5rem;
	box-sizing: border-box;
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
}

.mg-lightbox.mg-theme-light {
	--mg-lb-bg: rgba(244, 247, 251, 0.92);
	--mg-lb-btn: rgba(15, 23, 42, 0.08);
	--mg-lb-btn-hover: rgba(15, 23, 42, 0.14);
	--mg-lb-text: #0f172a;
	--mg-lb-muted: rgba(15, 23, 42, 0.65);
	--mg-lb-img-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
	--mg-lb-img-border: rgba(15, 23, 42, 0.08);
	color: #0f172a;
}

.mg-lightbox.mg-theme-dark {
	--mg-lb-bg: rgba(6, 8, 12, 0.94);
	--mg-lb-btn: rgba(255, 255, 255, 0.1);
	--mg-lb-btn-hover: rgba(255, 255, 255, 0.18);
	--mg-lb-text: #f3f4f6;
	--mg-lb-muted: rgba(255, 255, 255, 0.7);
	color: #f3f4f6;
}

.mg-lightbox.mg-glossy .mg-lightbox__img {
	border: 1px solid var(--mg-lb-img-border);
	box-shadow: var(--mg-lb-img-shadow), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.mg-lightbox.mg-glossy .mg-lightbox__btn {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mg-lightbox.mg-theme-light.mg-glossy .mg-lightbox__btn {
	border-color: rgba(15, 23, 42, 0.1);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	color: #0f172a;
}

.mg-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.mg-lightbox__inner {
	position: relative;
	max-width: min(96vw, 1200px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.mg-lightbox__img-wrap {
	position: relative;
	max-width: 100%;
	max-height: calc(90vh - 3rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mg-lightbox__img {
	display: block;
	max-width: 96vw;
	max-height: calc(90vh - 3.5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: var(--mg-lb-img-shadow);
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mg-lightbox.is-open .mg-lightbox__img.is-ready {
	opacity: 1;
	transform: scale(1);
}

.mg-lightbox__caption {
	color: var(--mg-lb-text);
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: center;
	max-width: 40rem;
	margin: 0;
	padding: 0 2.5rem;
	font-family: var(--mg-font, inherit);
}

.mg-lightbox__btn {
	position: absolute;
	appearance: none;
	border: none;
	background: var(--mg-lb-btn);
	color: var(--mg-lb-text);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 2;
	padding: 0;
}

.mg-lightbox__btn:hover,
.mg-lightbox__btn:focus-visible {
	background: var(--mg-lb-btn-hover);
	outline: none;
}

.mg-lightbox__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mg-lightbox__btn svg {
	width: 22px;
	height: 22px;
	display: block;
}

.mg-lightbox__close {
	top: 1rem;
	right: 1rem;
	position: fixed;
}

.mg-lightbox__prev {
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	position: fixed;
}

.mg-lightbox__next {
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	position: fixed;
}

.mg-lightbox__prev:hover,
.mg-lightbox__next:hover,
.mg-lightbox__prev:focus-visible,
.mg-lightbox__next:focus-visible {
	transform: translateY(-50%);
}

.mg-lightbox__counter {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--mg-lb-muted);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

body.mg-lightbox-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.mg-lightbox {
		padding: 0.75rem;
	}

	.mg-lightbox__prev,
	.mg-lightbox__next {
		width: 40px;
		height: 40px;
	}

	.mg-lightbox__caption {
		font-size: 0.85rem;
		padding: 0 0.5rem;
	}
}