.filtered-gallery {
width: 100%;
} .filtered-gallery .fg-header {
margin-bottom: 20px;
}
.filtered-gallery .fg-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
.filtered-gallery .fg-button {
cursor: pointer;
border: none;
background: transparent;
padding: 8px 16px;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
line-height: 1;
}
.filtered-gallery .fg-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
} .filtered-gallery .fg-galleries {
width: 100%;
}
.filtered-gallery .fg-gallery {
display: none;
grid-template-columns: repeat(var(--fg-columns, 3), 1fr);
gap: 16px;
}
.filtered-gallery .fg-gallery.is-active {
display: grid;
} .filtered-gallery .fg-item {
overflow: hidden;
}
.filtered-gallery .fg-item a {
display: block;
width: 100%;
height: 100%;
}
.filtered-gallery .fg-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
transition: transform 0.3s ease;
}
.filtered-gallery .fg-item:hover img {
transform: scale(1.03);
}
.filtered-gallery .fg-empty {
color: #888;
font-style: italic;
} @keyframes fg-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
.filtered-gallery .fg-gallery.is-active {
animation: fg-fade-in 0.3s ease;
} @media (max-width: 767px) {
.filtered-gallery .fg-gallery {
--fg-columns: 2;
}
}
@media (max-width: 480px) {
.filtered-gallery .fg-gallery {
--fg-columns: 1; 
}
} @media (max-width: 1024px) {
.filtered-gallery .fg-gallery {
--fg-columns: 2;
}
}
@media (max-width: 767px) {
.filtered-gallery .fg-gallery {
--fg-columns: 1;
}
}