/* Photo grid */

.photo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
}

.photo-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-grid__item figure {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink);
}

.photo-grid__item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .5s var(--ease);
}

.photo-grid__item:hover img {
	transform: scale(1.04);
}

.photo-grid__item figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 36px 16px 14px;
	background: linear-gradient(0deg, rgba(31, 26, 20, .8), transparent);
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35;
}

/* First photo doubles up on wide screens, only when the count fills the grid. */
@media (min-width: 1101px) {
	.photo-grid--feature .photo-grid__item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	.photo-grid--feature .photo-grid__item:first-child figure {
		height: 100%;
	}

	/* Absolute so the photo's own height never drives the row height. */
	.photo-grid--feature .photo-grid__item:first-child img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
}

.blk-photos__cta {
	justify-content: center;
	margin-top: 32px;
}

@media (max-width: 1100px) {
	.photo-grid,
	.photo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
	.photo-grid,
	.photo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.photo-grid__item figure { border-radius: var(--radius); }
	.photo-grid__item figcaption { font-size: .75rem; padding: 24px 10px 10px; }
}