/* gallery-bento — Figma 258:659: 4 cols × 1402px, gap 24, portrait cells 332×590, radius 32. */

.gallery-bento {
	padding-block: var(--space-8) calc(var(--space-section) / 2);
}

.gallery-bento__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: row; /* each cycle row sums to 4 columns — no dense packing, order is the client's */
	gap: var(--space-6);
	margin-block: 0;
	list-style: none;
}

.gallery-bento__item {
	aspect-ratio: 332 / 590; /* single cells; wide cells take the row's height */
}

.gallery-bento__item--wide {
	grid-column: span 2;
	aspect-ratio: auto;
	contain: size; /* the photo must not size the row — the single cells' ratio does */
}

.gallery-bento__link {
	display: block;
	block-size: 100%;
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.gallery-bento__link img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease-out);
}

.gallery-bento__link:hover img,
.gallery-bento__link:focus-visible img {
	transform: scale(1.05);
}

@media (max-width: 767px) { /* bp: --bp-md — 2 columns; wide photos get their own row */
	.gallery-bento__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row dense; /* 2 columns: back-fill the holes a wide photo leaves */
		gap: var(--space-3);
	}

	.gallery-bento__item {
		aspect-ratio: 3 / 4;
	}

	.gallery-bento__item--wide {
		aspect-ratio: 4 / 3;
	}
}