.sp-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 2rem 0;
}
.sp-gallery__item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
aspect-ratio: 4 / 3; overflow: hidden;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.sp-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1px;
display: block;
} @media (max-width: 1400px) {
.sp-gallery {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 768px) {
.sp-gallery {
grid-template-columns: 1fr;
}
}
.sp-gallery__item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.sp-gallery__item.visible {
opacity: 1;
transform: translateY(0);
}