/* =========================================================================
 * Gallery Grid 001 — Photo Mosaic with Full-Screen View
 *
 * A core Gallery redrawn as a four-column mosaic: the first photo two by two,
 * the rest single. Core lays galleries out with flex widths under an id-weight
 * selector (`figure.wp-block-image:not(#individual-image)`), so the figure
 * rules here carry the same :not(#…) plus one class more, to out-weigh it
 * rather than tie (a tie flips: core prints its block styles later). Three columns on tablets, two on
 * phones.
 * ========================================================================= */

.gallery-grid-001 {
	background: var(--color-surface);
}

.gallery-grid-001__head.gallery-grid-001__head {
	gap: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-lg);
}

.gallery-grid-001__head h2 {
	margin: var(--space-sm) 0 0;
}

.gallery-grid-001__hint {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(9rem, 14vw, 15rem);
	gap: var(--space-sm);
	margin: 0;
}

.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery figure.wp-block-image:not(#individual-image) {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery figure.wp-block-image:not(#individual-image):first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/* Core sizes gallery images `width: auto` (and the lightbox makes the figure a
   flex container), so the image takes the same id weight to fill its cell. */
.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery figure.wp-block-image:not(#individual-image) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s ease;
}

.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery figure.wp-block-image:not(#individual-image):hover img {
	transform: scale(1.04);
}

@media (max-width: 64rem) {
	.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.gallery-grid-001 .gallery-grid-001__grid.wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 8.5rem;
		gap: var(--space-xs);
	}
}