.wp-block-gallery.hef-masonry-gallery {
	--hef-masonry-gap: var(--wp--style--block-gap, 16px);
	--hef-masonry-grid-columns: 3;
	display: flex !important;
	width: 100%;
	max-width: 100%;
	align-items: flex-start;
	justify-content: center;
	gap: var(--hef-masonry-gap);
}

.wp-block-gallery.hef-masonry-gallery > .hef-masonry-gallery__column {
	display: flex;
	flex: 0 0 calc((100% - (var(--hef-masonry-grid-columns) - 1) * var(--hef-masonry-gap)) / var(--hef-masonry-grid-columns));
	min-width: 0;
	flex-direction: column;
	gap: var(--hef-masonry-gap);
}

.wp-block-gallery.hef-masonry-gallery .hef-masonry-gallery__column > .wp-block-image,
.wp-block-gallery.hef-masonry-gallery .hef-masonry-gallery__column > figure {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	cursor: zoom-in;
}

.wp-block-gallery.hef-masonry-gallery img {
	display: block;
	width: 100%;
	height: auto !important;
	max-width: 100%;
}

.hef-gallery-lightbox {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 64px;
	grid-template-rows: 64px minmax(0, 1fr) auto;
	align-items: center;
	background: rgba(0, 0, 0, .92);
	color: #fff;
}

.hef-gallery-lightbox[hidden] { display: none; }
.hef-gallery-lightbox__stage { grid-column: 2; grid-row: 2; display: flex; min-width: 0; min-height: 0; align-items: center; justify-content: center; }
.hef-gallery-lightbox__image { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 150px); object-fit: contain; }
.hef-gallery-lightbox__caption { grid-column: 2; grid-row: 3; min-height: 54px; margin: 0; padding: 14px 20px; font-family: Trocchi, serif; text-align: center; }
.hef-gallery-lightbox__button { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.hef-gallery-lightbox__button:hover, .hef-gallery-lightbox__button:focus-visible { background: #fff; color: #000; outline: 3px solid #9bddc1; outline-offset: 2px; }
.hef-gallery-lightbox__close { grid-column: 3; grid-row: 1; justify-self: center; }
.hef-gallery-lightbox__previous { grid-column: 1; grid-row: 2; justify-self: center; }
.hef-gallery-lightbox__next { grid-column: 3; grid-row: 2; justify-self: center; }
body.hef-gallery-lightbox-open { overflow: hidden; }

@media (max-width: 767px) {
	.hef-gallery-lightbox { grid-template-columns: 52px minmax(0, 1fr) 52px; }
	.hef-gallery-lightbox__button { width: 42px; height: 42px; }
}
