.masonry-gallery {
margin: 0 1rem;
}
.masonry-gallery .item {
position: relative;
margin: 0;
& img {
width: 100%;
height: auto;
display: block;
}
& a {
display: flex;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0, 0, 0, 0.65);
color: white !important;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding: 1em;
opacity: 0;
transition: opacity 0.3s ease-out;
& h3 {
color: inherit;
margin-block: 0 .5rem;
}
&:hover {
opacity: 1;
}
}
&:has(.galleryframe):before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E");
position: absolute;
top: 50%;
left: 50%;
width: min(10vw, 80px);
aspect-ratio: 1 / 1;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
border: 4px solid #000;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 1em;
line-height: 1em;
padding: 2em;
filter: invert(1);
transform: translateX(-50%) translateY(-50%);
}
} @supports (grid-template-rows: masonry) {
.masonry-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));
grid-template-rows: masonry;  gap: 1rem;
}
} @supports not (grid-template-rows: masonry) {
.masonry-gallery {
column-width: 325px;
column-gap: 1rem;
}
.masonry-gallery .item { break-inside: avoid;
margin-bottom: 1rem;
}
} @media (max-width: 650px) {
@supports (grid-template-rows: masonry) {
.masonry-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@supports not (grid-template-rows: masonry) {
.masonry-gallery {
column-width: 40vw;
column-gap: 1rem;
}
.masonry-gallery .item {
break-inside: avoid;
margin-bottom: 1rem;
}
}
}