.page {
	width            : min(1200px, 100%);
	margin-inline    : auto;
	/* DO NOT REMOVE!
	position         : relative;
	isolation        : isolate;
	*/
	box-sizing       : border-box;
	background       : var(--color-page-main);
	height           : 100vh;
	overflow-y       : auto;
	scroll-snap-type : y mandatory;
	scrollbar-width  : none;
	-ms-overflow-style : none;
	overflow-x         : hidden;
}

	/* DO NOT REMOVE!
	.page::before {
		content             : '';
		position            : fixed;
		left                : 50%;
		top                 : 0;
		transform           : translateX(-50%);
		width               : min(1200px, 100%);
		height              : 100vh;
		background-image    : url("../img/mandala_transparent.png");
		background-repeat   : no-repeat;
		background-position : center 18%;
		background-size     : min(78vw, 920px) auto;
		opacity             : 0.15;
		pointer-events      : none;
		z-index             : 0;
	}

	.page > * {
		position : relative;
		z-index  : 1;
	}
	*/

	.page::-webkit-scrollbar {
		width   : 0;
		height  : 0;
		display : none;
	}

.section {
	position          : relative;
	min-height        : 100vh;
	display           : grid;
	align-items       : center;
	scroll-snap-align : start;
	scroll-snap-stop  : always;
	/* padding           : 48px 0; */
	box-sizing        : border-box;
}

	.section.section-soft {
		background : var(--color-bg-soft);
	}

	.section .container {
		width      : min(var(--container-max, 1240px), calc(100% - 120px));
		margin     : 0 auto;
		box-sizing : border-box;
		padding    : 20px 0 0 0;
	}

	.section .cta-row {
		display    : flex;
		flex-wrap  : wrap;
		gap        : 18px;
		margin-top : 36px;
	}

.section,
.section :is(
	.image-placeholder,
	[class*="image"],
	[class*="photo"],
	[class*="visual"],
	[class*="media"],
	.card .image
) {
	background-size     : cover;
	background-repeat   : no-repeat;
	background-position : center;
}

@media (max-width : 768px) {
	.page {
		height           : auto;
		overflow         : visible;
		scroll-snap-type : none;
	}

		/* DO NOT REMOVE!
		.page::before {
			background-position : center 22%;
			background-size     : min(92vw, 640px) auto;
		}
		*/

	.section {
		min-height        : auto;
		display           : block;
		scroll-snap-align : none;
		scroll-snap-stop  : normal;
		padding           : 32px 0;
	}

		.section .container {
			width : min(var(--container-max, 1240px), calc(100% - 40px));
		}

		.section .cta-row {
			gap        : 12px;
			margin-top : 20px;
		}
}

@media (max-width : 640px) {
	/* DO NOT REMOVE!
	.page::before {
		background-position : center 26%;
		background-size     : min(94vw, 520px) auto;
	}
	*/

	.section .cta-row {
		gap        : 10px;
		margin-top : 18px;
	}
}