/**
 * DICM Image Gallery for Divi 5 — Lightbox styles.
 * Port of the Divi 4 DICM_Lightbox_Helper CSS. Safari desktop tweaks are
 * applied via the .dmg-safari class (added by lightbox.js) instead of PHP UA
 * sniffing.
 */

/* ── BASE MODAL ─────────────────────────────────────────────────────────── */
#dmg-modal {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.93);
	z-index: 9999999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-sizing: border-box;
	transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	backdrop-filter: blur(2px);
}

#dmg-modal.dmg-safari {
	transition: opacity 0.2s ease, visibility 0.2s ease;
	backdrop-filter: none;
}

#dmg-modal.active {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
	justify-content: center;
	align-items: center;
}

/* ── TOOLBAR ────────────────────────────────────────────────────────────── */
#dmg-modal .dmg-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	z-index: 10001;
	box-sizing: border-box;
}

#dmg-modal .dmg-left-controls,
#dmg-modal .dmg-right-controls {
	display: flex;
	align-items: center;
}

#dmg-modal .dmg-right-controls {
	gap: 30px;
}

/* ── CONTROLS (close / download / mode-toggle) ──────────────────────────── */
#dmg-modal .dmg-close,
#dmg-modal .dmg-download,
#dmg-modal .dmg-mode-toggle {
	cursor: pointer;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	padding: 8px;
	transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

#dmg-modal .dmg-close:hover,
#dmg-modal .dmg-download:hover,
#dmg-modal .dmg-mode-toggle:hover {
	transform: scale(1.1);
	opacity: 0.8;
}

/* Window-mode toolbar button bg */
#dmg-modal.dmg-window-mode .dmg-close,
#dmg-modal.dmg-window-mode .dmg-download,
#dmg-modal.dmg-window-mode .dmg-mode-toggle {
	background: rgba(0, 0, 0, 0.04);
}

#dmg-modal.dmg-window-mode .dmg-close:hover,
#dmg-modal.dmg-window-mode .dmg-download:hover,
#dmg-modal.dmg-window-mode .dmg-mode-toggle:hover {
	background: rgba(0, 0, 0, 0.12);
}

/* Fullscreen-mode toolbar button bg */
#dmg-modal.dmg-fullscreen-mode .dmg-toolbar {
	background: rgba(0, 0, 0, 0.02);
}

#dmg-modal.dmg-fullscreen-mode .dmg-close,
#dmg-modal.dmg-fullscreen-mode .dmg-download,
#dmg-modal.dmg-fullscreen-mode .dmg-mode-toggle {
	background: rgba(255, 255, 255, 0.1);
}

#dmg-modal.dmg-fullscreen-mode .dmg-close:hover,
#dmg-modal.dmg-fullscreen-mode .dmg-download:hover,
#dmg-modal.dmg-fullscreen-mode .dmg-mode-toggle:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.05);
}

/* ── NAVIGATION ARROWS ──────────────────────────────────────────────────── */
#dmg-modal .dmg-prev,
#dmg-modal .dmg-next {
	position: absolute;
	z-index: 10001;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

#dmg-modal .dmg-prev {
	left: 40px;
}

#dmg-modal .dmg-next {
	right: 40px;
}

#dmg-modal.dmg-window-mode .dmg-prev,
#dmg-modal.dmg-window-mode .dmg-next {
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.04);
}

#dmg-modal.dmg-fullscreen-mode .dmg-prev,
#dmg-modal.dmg-fullscreen-mode .dmg-next {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

#dmg-modal.dmg-safari.dmg-fullscreen-mode .dmg-prev,
#dmg-modal.dmg-safari.dmg-fullscreen-mode .dmg-next {
	backdrop-filter: none;
}

#dmg-modal .dmg-prev:hover,
#dmg-modal .dmg-next:hover {
	transform: translateY(-50%) scale(1.1);
	opacity: 0.8;
}

#dmg-modal .dmg-prev:active,
#dmg-modal .dmg-next:active {
	transform: translateY(-50%) scale(0.95) !important;
}

/* ── TAP HIGHLIGHT / FOCUS FLASH ────────────────────────────────────────────
   Tapping any control painted a translucent blue box the size of its hit area:
   the mobile tap highlight, which WebKit applies to anything it decides is
   clickable — these are <div>s with click handlers, so they qualify. On desktop
   the same controls picked up whatever the theme styles :focus and :active to
   look like.

   Deliberately NOT `background: transparent !important`, the fix the menu
   hamburger uses. That element is meant to have no background; these have a
   designed one per mode (translucent dark in window mode, translucent light in
   fullscreen), and blanking it would trade a flash for invisible controls. Only
   the highlight and the focus ring are removed — every background rule above
   still applies.

   :focus-visible keeps a real ring, so keyboard users do not lose the one
   affordance the flash was accidentally providing. It never fires on a tap. */
#dmg-modal .dmg-close,
#dmg-modal .dmg-prev,
#dmg-modal .dmg-next,
#dmg-modal .dmg-download,
#dmg-modal .dmg-mode-toggle,
#dmg-modal .dmg-close *,
#dmg-modal .dmg-prev *,
#dmg-modal .dmg-next *,
#dmg-modal .dmg-download *,
#dmg-modal .dmg-mode-toggle * {
	-webkit-tap-highlight-color: transparent !important;
	tap-highlight-color: transparent !important;
	-webkit-touch-callout: none;
}

#dmg-modal .dmg-close:focus,
#dmg-modal .dmg-prev:focus,
#dmg-modal .dmg-next:focus,
#dmg-modal .dmg-download:focus,
#dmg-modal .dmg-mode-toggle:focus,
#dmg-modal .dmg-close:active,
#dmg-modal .dmg-prev:active,
#dmg-modal .dmg-next:active,
#dmg-modal .dmg-download:active,
#dmg-modal .dmg-mode-toggle:active {
	outline: none !important;
}

#dmg-modal .dmg-close:focus-visible,
#dmg-modal .dmg-prev:focus-visible,
#dmg-modal .dmg-next:focus-visible,
#dmg-modal .dmg-download:focus-visible,
#dmg-modal .dmg-mode-toggle:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px;
}

/* The image itself: a long press on mobile pops the "save image" sheet mid
   swipe, which reads as the gallery hanging. */
#dmg-modal .dmg-modal-image,
#dmg-modal .dmg-slider-container {
	-webkit-tap-highlight-color: transparent !important;
}

/* ── SVG ICONS ──────────────────────────────────────────────────────────── */
#dmg-modal .dmg-close svg,
#dmg-modal .dmg-prev svg,
#dmg-modal .dmg-next svg,
#dmg-modal .dmg-download svg,
#dmg-modal .dmg-mode-toggle svg {
	color: inherit;
	display: block;
}

#dmg-modal .dmg-close svg *,
#dmg-modal .dmg-prev svg *,
#dmg-modal .dmg-next svg *,
#dmg-modal .dmg-download svg *,
#dmg-modal .dmg-mode-toggle svg * {
	fill: currentColor;
}

/* ── MODAL CONTENT ──────────────────────────────────────────────────────── */
#dmg-modal .dmg-slider-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

#dmg-modal .dmg-modal-image {
	display: block;
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
	backface-visibility: hidden;
}

/* ── SLIDE TRANSITION ───────────────────────────────────────────────────── */
/* The outgoing image is pinned to the viewport while the decoded incoming
   image takes its final size underneath it. This is what lets unlike aspect
   ratios crossfade without stretching or exposing a blank stage. */
#dmg-modal .dmg-modal-ghost {
	position: fixed;
	margin: 0;
	padding: 0;
	display: block;
	object-fit: contain;
	pointer-events: none;
	z-index: 2;
	will-change: opacity, transform;
	backface-visibility: hidden;
}

/* Shown only when a slide takes longer than ~180ms to decode. Cached
   neighbours go straight into the crossfade, while a genuinely slow image
   gets a quiet loading cue instead of a sudden blank frame. */
#dmg-modal .dmg-slider-container::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.12));
	transition: opacity 0.25s ease;
}

#dmg-modal .dmg-slider-container.dmg-loading::after {
	opacity: 0.46;
	animation: dmgSpin 0.9s linear infinite;
}

@keyframes dmgSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	#dmg-modal .dmg-slider-container.dmg-loading::after {
		animation: none;
	}
}

#dmg-modal.dmg-safari .dmg-modal-image {
	transition: opacity 0.25s ease;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
#dmg-modal .dmg-lb-title {
	display: block;
	margin: 0 0 1rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-size: 24px;
	font-weight: 700;
	color: #000000;
}

#dmg-modal .dmg-lb-desctext {
	display: block;
	margin: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-size: 16px;
	line-height: 1.6em;
	color: #666666;
}

/* ── FULLSCREEN MODE ────────────────────────────────────────────────────── */
#dmg-modal.dmg-fullscreen-mode .dmg-desc-container {
	display: none !important;
}

#dmg-modal.dmg-fullscreen-mode .dmg-modal-content {
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
}

#dmg-modal.dmg-fullscreen-mode .dmg-slider-container {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	flex: 1 !important;
}

#dmg-modal.dmg-fullscreen-mode .dmg-modal-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* ── WINDOW MODE — ONE COLUMN ───────────────────────────────────────────── */
#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-modal-content {
	width: 80%;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-slider-container {
	width: 100%;
	max-width: 90%;
	height: 90vh;
	flex: none;
}

#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-modal-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-desc-container.window-text {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 2rem;
}

/* ── WINDOW MODE — TWO COLUMNS (GRID) ───────────────────────────────────── */
#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-content {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 1rem;
	display: grid;
	grid-template-columns: 1.5fr 0.5fr;
	align-items: center;
	gap: 1.5rem;
	position: relative;
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-slider-container {
	width: 100%;
	overflow: hidden;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-image {
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-image.dmg-portrait {
	max-height: 92vh;
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-image.dmg-landscape {
	max-height: 80vh;
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-width: 0;
	padding: 2rem;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 80vh;
}

/* ── TWO COLUMNS — WHERE THE TEXT SITS IN ITS COLUMN ────────────────────── */
/*
 * The column is already a flex column, so this is only ever a question of
 * justify-content. `center` is the default because a two or three line caption
 * pinned to the top of a 900px column reads as though it slipped rather than as
 * a deliberate alignment.
 *
 * The grid's own `align-items: center` has to give way to `stretch` first —
 * otherwise the column is only as tall as its text and there is no space left
 * for justify-content to distribute.
 */
#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-content {
	align-items: stretch;
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-slider-container {
	align-self: center;
}

#dmg-modal.dmg-text-top.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
	justify-content: flex-start;
}

#dmg-modal.dmg-text-center.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
	justify-content: center;
}

#dmg-modal.dmg-text-bottom.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
	justify-content: flex-end;
}

/* The text column is capped at 80vh but the image may be taller, so the column
   is matched to the image rather than to the viewport — otherwise "bottom"
   would sit 12vh above the bottom of a tall portrait. */
#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
	max-height: 92vh;
}

/* ── TWO COLUMNS — NO TEXT AT ALL ───────────────────────────────────────── */
/*
 * Nothing to put beside the image, so the second column stops existing rather
 * than sitting there empty and holding the photo off-centre at 75% width.
 * With no caption competing for height the landscape cap is lifted to match
 * the portrait one: there is no longer a reason to hold a wide image short.
 */
/*
 * Two tracks, always — the second one is simply taken to zero.
 *
 * `grid-template-columns` only interpolates between values with the SAME
 * number of tracks, so `1.5fr 0.5fr` → `1fr` cannot be animated and snaps.
 * `1.5fr 0.5fr` → `1fr 0fr` describes the identical end state and does
 * interpolate, which is the whole difference between the column folding away
 * and the column cutting away.
 */
#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-content {
	grid-template-columns: 1fr 0fr;
	gap: 0;
	justify-items: center;
}

/* ── CONTENT WHEN THE TEXT COLUMN COMES OR GOES ────────────────────────── */
/*
 * The image column changes width when a slide with a caption gives way to one
 * without. The class is armed immediately before the per-slide layout changes,
 * so the content expands during the incoming fade.
 *
 * Armed only while the script is navigating: left on permanently it would also
 * animate opening the lightbox, resizing the window and entering fullscreen,
 * which should all land in their final state rather than be seen travelling
 * toward it.
 */
#dmg-modal.dmg-morphing.dmg-window-mode.dmg-layout-two-columns .dmg-modal-content {
	transition:
		grid-template-columns 320ms cubic-bezier(0.16, 1, 0.3, 1),
		column-gap 320ms cubic-bezier(0.16, 1, 0.3, 1),
		row-gap 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-image,
#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-image.dmg-landscape,
#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-image.dmg-portrait {
	max-height: 92vh;
}

/* ── TWO COLUMNS — ARROWS FOLLOW THE AVAILABLE IMAGE AREA ──────────────── */
/*
 * When text exists, both controls sit just beyond the available image column.
 * When no text exists, the image owns the complete content width and the base
 * left:40px/right:40px rules place both arrows at the viewport edges.
 *
 * The image column retains internal clearance on desktop so a control near the
 * viewport edge never covers the picture at narrower desktop widths.
 */
@media (min-width: 1025px) {
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns {
		--dmg-2col-width: min(90%, 1400px);
		--dmg-2col-padding: 1rem;
		--dmg-2col-gap: 1.5rem;
		--dmg-2col-inner: calc(var(--dmg-2col-width) - 2 * var(--dmg-2col-padding) - var(--dmg-2col-gap));
		--dmg-2col-image: calc(var(--dmg-2col-inner) * 0.75);
		--dmg-2col-text: calc(var(--dmg-2col-inner) * 0.25);
		--dmg-2col-left: calc((100% - var(--dmg-2col-width)) / 2 + var(--dmg-2col-padding));
		--dmg-2col-text-left: calc(var(--dmg-2col-left) + var(--dmg-2col-image) + var(--dmg-2col-gap));
		--dmg-caption-top: 15rem;
		--dmg-2col-inset: 10px;
		/* Arrow width (50px) + breathing room. */
		--dmg-2col-clearance: calc(var(--dmg-2col-inset) + 50px + 14px);
	}

	/*
	 * In the reference lightbox a top-aligned caption belongs to the viewport,
	 * not to the current image's grid row. Keeping it fixed here prevents a
	 * portrait and a landscape from giving the same title two different Y
	 * coordinates. The horizontal variables still place it in the existing
	 * text column, so the image/arrow geometry is unchanged.
	 */
	#dmg-modal.dmg-text-top.dmg-window-mode.dmg-layout-two-columns:not(.dmg-no-text) .dmg-desc-container.window-text {
		position: fixed;
		top: var(--dmg-caption-top);
		left: var(--dmg-2col-text-left);
		width: var(--dmg-2col-text);
		height: auto;
		max-height: calc(100vh - var(--dmg-caption-top) - 2rem);
		box-sizing: border-box;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns:not(.dmg-no-text) .dmg-next {
		right: calc(100% - var(--dmg-2col-left) - var(--dmg-2col-image) + var(--dmg-2col-inset));
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns:not(.dmg-no-text) .dmg-prev {
		left: calc(var(--dmg-2col-left) + var(--dmg-2col-inset));
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-slider-container {
		box-sizing: border-box;
		padding-left: var(--dmg-2col-clearance);
		padding-right: var(--dmg-2col-clearance);
	}
}

/* ── HIDDEN ─────────────────────────────────────────────────────────────── */
.hidden,
#dmg-modal .dmg-desc-container.hidden {
	display: none !important;
}

/* ── OPEN ANIMATION ─────────────────────────────────────────────────────── */
@keyframes dmgFadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dmgFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#dmg-modal.active .dmg-modal-content {
	animation: dmgFadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*
 * A transformed ancestor becomes the containing block for position:fixed.
 * Top-aligned two-column captions are viewport-anchored, so their opening
 * animation fades without translating the content wrapper.
 */
#dmg-modal.active.dmg-text-top.dmg-window-mode.dmg-layout-two-columns:not(.dmg-no-text) .dmg-modal-content {
	animation-name: dmgFadeIn;
}

#dmg-modal.dmg-safari.active .dmg-modal-content {
	animation: none;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1400px) {
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-content {
		grid-template-columns: 1.5fr 0.5fr;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
		padding: 1.5rem;
	}
}

@media (max-width: 1024px) {
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-content {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		overflow-y: auto !important;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-slider-container {
		width: 100% !important;
		max-height: 50vh;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-image {
		max-height: 50vh;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-desc-container.window-text {
		text-align: center !important;
		align-items: center !important;
		padding: 1rem !important;
		max-height: none;
	}

	/*
	 * The 50vh cap above exists to leave room for the caption stacked beneath
	 * the image. With no caption there is nothing to leave room for, so the
	 * image takes the height back — but not the 92vh it gets on a desktop,
	 * because the close and fullscreen controls sit much closer to the edge on
	 * a small screen.
	 */
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-slider-container,
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-image,
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-image.dmg-portrait,
	#dmg-modal.dmg-window-mode.dmg-layout-two-columns.dmg-no-text .dmg-modal-image.dmg-landscape {
		max-height: 82vh;
	}
}

@media (min-width: 600px) and (max-width: 1024px) {
	#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-modal-content {
		width: 90%;
		gap: 1.5rem;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-slider-container {
		height: 60vh;
	}

	#dmg-modal .dmg-prev {
		left: 30px;
	}

	#dmg-modal .dmg-next {
		right: 30px;
	}
}

@media (max-width: 599px) {
	#dmg-modal.dmg-window-mode .dmg-modal-content {
		width: 95%;
		gap: 1rem;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-one-column .dmg-slider-container {
		height: 65vh;
	}

	#dmg-modal.dmg-window-mode.dmg-layout-two-columns .dmg-modal-content {
		grid-template-columns: 1fr !important;
		padding: 0.5rem;
	}

	#dmg-modal .dmg-toolbar {
		padding: 15px;
	}

	#dmg-modal .dmg-right-controls {
		gap: 20px;
	}

	#dmg-modal .dmg-prev,
	#dmg-modal .dmg-next {
		width: 50px !important;
		height: 50px !important;
	}

	#dmg-modal .dmg-prev {
		left: 20px !important;
	}

	#dmg-modal .dmg-next {
		right: 20px !important;
	}

	#dmg-modal .dmg-lb-title {
		font-size: 20px;
	}

	#dmg-modal .dmg-lb-desctext {
		font-size: 14px;
	}
}