/**
 * About page — Images section (Section 2).
 * Figma: two-column staggered image grid on light gray background.
 */

:root {
	--sp-about-images-bg: #d9d9d9;
	--sp-about-images-pad-top: clamp(48px, calc(115 / var(--spaciefy-artboard) * 100vw), 115px);
	--sp-about-images-pad-bottom: clamp(64px, calc(171 / var(--spaciefy-artboard) * 100vw), 171px);
	--sp-about-images-grid-gap: clamp(24px, calc(130 / var(--spaciefy-artboard) * 100vw), 130px);
	--sp-about-images-row-gap: clamp(24px, calc(130 / var(--spaciefy-artboard) * 100vw), 130px);
	--sp-about-images-left-col: clamp(200px, calc(737 / var(--spaciefy-artboard) * 100vw), 737px);
	--sp-about-images-right-col: clamp(240px, calc(896 / var(--spaciefy-artboard) * 100vw), 896px);
	--sp-about-images-right-offset: clamp(40px, calc(114 / var(--spaciefy-artboard) * 100vw), 114px);
	--sp-about-images-left-aspect: 70 / 53;
	--sp-about-images-right-aspect: 112 / 79;
	--sp-about-images-stack-aspect: 16 / 10;
}

.sp-about-images {
	width: 100%;
	background-color: var(--sp-about-images-bg);
	overflow: hidden;
}

.sp-about-images__container {
	width: var(--spaciefy-container-width);
	max-width: var(--spaciefy-container);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--sp-about-images-pad-top);
	padding-bottom: var(--sp-about-images-pad-bottom);
}

.sp-about-images__grid {
	display: grid;
	grid-template-columns: var(--sp-about-images-left-col) var(--sp-about-images-right-col);
	column-gap: var(--sp-about-images-grid-gap);
	align-items: start;
	width: 100%;
}

.sp-about-images__grid-col {
	min-width: 0;
}

.sp-about-images__grid-col--right {
	margin-top: var(--sp-about-images-right-offset);
}

.sp-about-images__image,
.sp-about-images__image-placeholder {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.sp-about-images__grid-col--left .sp-about-images__image,
.sp-about-images__grid-col--left .sp-about-images__image-placeholder {
	aspect-ratio: var(--sp-about-images-left-aspect);
}

.sp-about-images__grid-col--right .sp-about-images__image,
.sp-about-images__grid-col--right .sp-about-images__image-placeholder {
	aspect-ratio: var(--sp-about-images-right-aspect);
}

.sp-about-images__image-placeholder {
	background-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px) {
	.sp-about-images__grid {
		grid-template-columns: 1fr;
		row-gap: var(--sp-about-images-row-gap);
	}

	.sp-about-images__grid-col--right {
		margin-top: 0;
	}

	.sp-about-images__grid-col--left .sp-about-images__image,
	.sp-about-images__grid-col--left .sp-about-images__image-placeholder,
	.sp-about-images__grid-col--right .sp-about-images__image,
	.sp-about-images__grid-col--right .sp-about-images__image-placeholder {
		aspect-ratio: var(--sp-about-images-stack-aspect);
	}
}