.collage {
	--collage-bg: #F9F7F2;
	--collage-empty: #FFFFFF;   /* shows behind any tile with no media yet */

	width: 100%;
	background: var(--collage-bg);
	padding: 56px 0 48px;
}

/* Desktop layout measured from Figma (1113 x 616).
   Column ratio 332 : 204 : 332 : 204. Row ratio 157 : 68 : 165 : 69 : 157. */
.collage__grid {
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 332fr 204fr 332fr 204fr;
	grid-template-rows: 157fr 68fr 165fr 69fr 157fr;
	column-gap: 1.2%;
	aspect-ratio: 1113 / 616;
}

.collage__item { position: relative; overflow: hidden; min-width: 0; min-height: 0; background: var(--collage-empty); }
.collage__item--1 { grid-column: 1; grid-row: 1 / 4; }
.collage__item--2 { grid-column: 2; grid-row: 2 / 4; }
.collage__item--3 { grid-column: 3; grid-row: 3 / 6; }
.collage__item--4 { grid-column: 4; grid-row: 3 / 5; }

.collage__media,
.collage__item iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* Play button for YouTube / Vimeo links */
.collage__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	padding: 0 0 0 3px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	background: rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.collage__play:hover { background: rgba(0, 0, 0, .45); }
.collage__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }




@media (max-width: 991px) {
	.collage { padding: 44px 0 40px; }
	.collage__grid { width: 92%; }
}

/* Mobile: full, half, half, full — natural media shape, no crop */
@media (max-width: 575px) {
	.collage { padding: 32px 0; }
	.collage__grid {
		width: 100%;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		aspect-ratio: auto;
		align-items: start;
		gap: 10px;
	}
	.collage__item.collage__item--1 {
    height: 500px;
}
	.collage__item {
		grid-column: auto !important;
		grid-row: auto !important;
		aspect-ratio: auto;
		min-height: auto;
	}
	.collage__item--1,
	.collage__item--4 { grid-column: 1 / -1 !important; }

	.collage__media,
	.collage__item iframe {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.collage__item video,
	.collage__item iframe {
		aspect-ratio: 0 / 3;
		object-fit: contain;
	}

	.collage__item:has(iframe) > .collage__media {
		display: none;
	}
}