/* ─── Photo Collage Element ──────────────────────────────────────────────────── */

.photo-collage {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: var(--pc-row-height) var(--pc-row-height) var(--pc-row-height);
	grid-template-areas:
		"A A B B C D"
		"A A G G H H"
		"E F G G I I";
	background: #fff;
}

/* ─── Grid Area Assignments ──────────────────────────────────────────────────── */

.pc-item--1 { grid-area: A; }
.pc-item--2 { grid-area: B; }
.pc-item--3 { grid-area: C; }
.pc-item--4 { grid-area: D; }
.pc-item--5 { grid-area: E; }
.pc-item--6 { grid-area: F; }
.pc-item--7 { grid-area: G; }
.pc-item--8 { grid-area: H; }
.pc-item--9 { grid-area: I; }

/* ─── Images ─────────────────────────────────────────────────────────────────── */

.pc-item {
	overflow: hidden;
}

.pc-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.pc-item:hover img {
	transform: scale(1.04);
}

/* ─── Tablet: 2×4 uniform grid ──────────────────────────────────────────────── */

@media (max-width: 849px) {
	.photo-collage {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
		grid-auto-rows: 150px;
	}

	.photo-collage .pc-item--1,
	.photo-collage .pc-item--2,
	.photo-collage .pc-item--3,
	.photo-collage .pc-item--4,
	.photo-collage .pc-item--5,
	.photo-collage .pc-item--6,
	.photo-collage .pc-item--7,
	.photo-collage .pc-item--8 {
		grid-area: auto;
	}
}

/* ─── Mobile: single column ──────────────────────────────────────────────────── */

@media (max-width: 549px) {
	.photo-collage {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}
}