.container {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s2);
	width: var(--width);
	max-width: var(--maxwidth);
	margin-left: auto;
	margin-right: auto;
}

.gctx {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--s2);
}

.container > *,
.gctx > * {
	grid-column: 1 / span 12;
	min-width: 0;
}

figure {
	margin: 0;
}

.spacer {
	height: var(--s2);
}

[hidden] {
	display: none !important;
}

.t-l { text-align: left; }
.t-c { text-align: center; }
.t-r { text-align: right; }

.t-l,
.t-c,
.t-r {
	display: block;
}

.g2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.g4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.g6 {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.g12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.c {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.af { --af: row; }
.ad { --af: dense; }

.gx0 { --gx: 0; }
.gx2 { --gx: calc(var(--space, 1rem) * 2); }
.gx4 { --gx: calc(var(--space, 1rem) * 4); }
.gx6 { --gx: calc(var(--space, 1rem) * 6); }

.gy0 { --gy: 0; }
.gy2 { --gy: calc(var(--space, 1rem) * 2); }
.gy4 { --gy: calc(var(--space, 1rem) * 4); }
.gy6 { --gy: calc(var(--space, 1rem) * 6); }

/* Alignment */
.ai-s { align-items: start; }
.ai-c { align-items: center; }
.ai-e { align-items: end; }
.ai-st { align-items: stretch; }

.ji-s { justify-items: start; }
.ji-c { justify-items: center; }
.ji-e { justify-items: end; }
.ji-st { justify-items: stretch; }

.jc-s { justify-content: start; }
.jc-c { justify-content: center; }
.jc-e { justify-content: end; }
.jc-b { justify-content: space-between; }
.jc-a { justify-content: space-around; }
.jc-ev { justify-content: space-evenly; }

/* ===== Desktop-only placement utilities ===== */
@media (min-width: 768px) {
	.cs1 { grid-column-start: 1; }
	.cs2 { grid-column-start: 2; }
	.cs3 { grid-column-start: 3; }
	.cs4 { grid-column-start: 4; }
	.cs5 { grid-column-start: 5; }
	.cs6 { grid-column-start: 6; }
	.cs7 { grid-column-start: 7; }
	.cs8 { grid-column-start: 8; }
	.cs9 { grid-column-start: 9; }
	.cs10 { grid-column-start: 10; }
	.cs11 { grid-column-start: 11; }
	.cs12 { grid-column-start: 12; }

	.sp1 { grid-column-end: span 1; }
	.sp2 { grid-column-end: span 2; }
	.sp3 { grid-column-end: span 3; }
	.sp4 { grid-column-end: span 4; }
	.sp5 { grid-column-end: span 5; }
	.sp6 { grid-column-end: span 6; }
	.sp7 { grid-column-end: span 7; }
	.sp8 { grid-column-end: span 8; }
	.sp9 { grid-column-end: span 9; }
	.sp10 { grid-column-end: span 10; }
	.sp11 { grid-column-end: span 11; }
	.sp12 { grid-column-end: span 12; }
}

@media (max-width: 980px) {
	.md\:ad { --af: dense; }
	.md\:gx0 { --gx: 0; }
	.md\:gx2 { --gx: calc(var(--space, 1rem) * 2); }
	.md\:gx4 { --gx: calc(var(--space, 1rem) * 4); }
	.md\:gx6 { --gx: calc(var(--space, 1rem) * 6); }
	.md\:gy0 { --gy: 0; }
	.md\:gy2 { --gy: calc(var(--space, 1rem) * 2); }
	.md\:gy4 { --gy: calc(var(--space, 1rem) * 4); }
	.md\:gy6 { --gy: calc(var(--space, 1rem) * 6); }

	.md\:cs1 { grid-column-start: 1; }
	.md\:cs2 { grid-column-start: 2; }
	.md\:cs3 { grid-column-start: 3; }
	.md\:cs4 { grid-column-start: 4; }
	.md\:cs5 { grid-column-start: 5; }
	.md\:cs6 { grid-column-start: 6; }
	.md\:cs7 { grid-column-start: 7; }
	.md\:cs8 { grid-column-start: 8; }
	.md\:cs9 { grid-column-start: 9; }
	.md\:cs10 { grid-column-start: 10; }
	.md\:cs11 { grid-column-start: 11; }
	.md\:cs12 { grid-column-start: 12; }

	.md\:sp1 { grid-column-end: span 1; }
	.md\:sp2 { grid-column-end: span 2; }
	.md\:sp3 { grid-column-end: span 3; }
	.md\:sp4 { grid-column-end: span 4; }
	.md\:sp5 { grid-column-end: span 5; }
	.md\:sp6 { grid-column-end: span 6; }
	.md\:sp7 { grid-column-end: span 7; }
	.md\:sp8 { grid-column-end: span 8; }
	.md\:sp9 { grid-column-end: span 9; }
	.md\:sp10 { grid-column-end: span 10; }
	.md\:sp11 { grid-column-end: span 11; }
	.md\:sp12 { grid-column-end: span 12; }
}

/* ===== Mobile: 6-column grid + full width by default ===== */
@media (max-width: 767px) {
	.container,
	.gctx {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: var(--gap-x-mobile, clamp(8px, 3vw, 16px));
		row-gap: var(--gap-y-mobile, var(--s2));
	}

	.container > *,
	.gctx > * {
		grid-column: 1 / span 6;
		min-width: 0;
	}

	.g2, .g3, .g4, .g6, .g16 {
		grid-template-columns: 1fr;
	}

	.sm\:cs1 { grid-column-start: 1; }
	.sm\:cs2 { grid-column-start: 2; }
	.sm\:cs3 { grid-column-start: 3; }
	.sm\:cs4 { grid-column-start: 4; }
	.sm\:cs5 { grid-column-start: 5; }
	.sm\:cs6 { grid-column-start: 6; }

	.sm\:sp1 { grid-column-end: span 1; }
	.sm\:sp2 { grid-column-end: span 2; }
	.sm\:sp3 { grid-column-end: span 3; }
	.sm\:sp4 { grid-column-end: span 4; }
	.sm\:sp5 { grid-column-end: span 5; }
	.sm\:sp6 { grid-column-end: span 6; }
}

.img > a,
.img > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.media,
.md {
	--ratio: auto;
	--ratio-rotated: var(--ratio);
	position: relative;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: var(--ratio);
}

.md-r11 {
	--ratio: 1 / 1;
	--ratio-rotated: 1 / 1;
	aspect-ratio: var(--ratio);
}

.md-r32 {
	--ratio: 3 / 2;
	--ratio-rotated: 2 / 3;
	aspect-ratio: var(--ratio);
}

.md-r54 {
	--ratio: 5 / 4;
	--ratio-rotated: 4 / 5;
	aspect-ratio: var(--ratio);
}

.md-r75 {
	--ratio: 7 / 5;
	--ratio-rotated: 5 / 7;
	aspect-ratio: var(--ratio);
}

.md-r169 {
	--ratio: 16 / 9;
	--ratio-rotated: 9 / 16;
	aspect-ratio: var(--ratio);
}

.md-r21 {
	--ratio: 2 / 1;
	--ratio-rotated: 1 / 2;
	aspect-ratio: var(--ratio);
}

.md-r31 {
	--ratio: 3 / 1;
	--ratio-rotated: 1 / 3;
	aspect-ratio: var(--ratio);
}

.md-rr {
	aspect-ratio: var(--ratio-rotated, var(--ratio));
}

.md-fv img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.md-fv iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.md-fc * {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

.md-fc iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.media-h-normal {
	height: auto;
}

.md-hf {
	align-self: stretch;
	height: 100%;
}

.md-hf img {
	height: 100%;
}

.md-hm {
	align-self: stretch;
	height: 100%;
	max-height: 100%;
}

.md-hm img {
	height: 100%;
}

section {
	position: relative;
}

.bg-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.bg-layer ~ * {
	position: relative;
	z-index: 1;
}

body.mtn-ch > main > section > .container > *:not(.bg-layer) {
	transition: transform 1s ease, opacity 1s ease !important;
	transition-delay: .25s !important;
	opacity: 0 !important;
	transform: translateY(15px) !important;
}

body.mtn-ch > main > section > .container > *:not(.bg-layer).in {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

body.mtn-con > main > section > .container {
	transition: transform 1s ease, opacity 1s ease !important;
	transition-delay: .25s !important;
	opacity: 0 !important;
	transform: translateY(15px) !important;
}

body.mtn-con > main > section > .container.in {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
	body.mtn-ch > main > section > .container > *,
	body.mtn-con > main > section > .container {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}