/*
 * Magazine layout for core/gallery.
 * Note: WP writes column count as an *inline* style on the gallery figure,
 * so grid-template-columns / gap need !important here to actually win.
 */
.wp-block-gallery.pr-auto-gallery {
	display: grid !important;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
}

.wp-block-gallery.pr-auto-gallery .wp-block-image,
.wp-block-gallery.pr-auto-gallery .blocks-gallery-item {
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
}

.wp-block-gallery.pr-auto-gallery .wp-block-image img,
.wp-block-gallery.pr-auto-gallery .blocks-gallery-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* First image is the "feature" image */
.wp-block-gallery.pr-auto-gallery .wp-block-image:first-child,
.wp-block-gallery.pr-auto-gallery .blocks-gallery-item:first-child {
	grid-column: 1 / -1;
}

/* Desktop: feature image on the left spanning two rows */
@media ( min-width: 700px ) {
	.wp-block-gallery.pr-auto-gallery {
		grid-template-columns: 2fr 1fr 1fr !important;
		grid-auto-rows: minmax( 140px, auto );
	}

	.wp-block-gallery.pr-auto-gallery .wp-block-image:first-child,
	.wp-block-gallery.pr-auto-gallery .blocks-gallery-item:first-child {
		grid-column: span 1;
		grid-row: span 2;
	}
}