@keyframes fadeSlideIn {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Base grid setup */

 #masonry-grid {
     width: 100%;
     box-sizing: border-box;
     padding: 18px;
 }

 .grid-item {
     padding: 0;
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-radius: 15px;
     overflow: hidden;
     background: #000;
     border: 1px solid rgba(255, 255, 255, 0.15);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     visibility: hidden;
     opacity: 0;
     transform: translateY(20px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
     will-change: transform, opacity;
     margin-bottom: 16px !important;
 }

 /* Grid sizer and items - mobile first (1 column) */

 .grid-sizer,
 .grid-item {
     width: calc(100% - 32px);
     /* Start with 1 column on mobile */
 }

 /* Ensure vertical spacing matches horizontal */

 .grid-item {
     margin-bottom: 16px !important;
     /* Same as gutter value */
 }

 @media (min-width: 768px) {
     .grid-sizer,
     .grid-item {
         width: calc((100% - 38px) / 2);
         /* 2 columns */
     }
 }

 /* Media queries for responsive columns */

 @media (min-width: 920px) {
     .grid-sizer,
     .grid-item {
         width: calc((100% - 64px) / 3);
         /* 3 columns */
     }
 }

 @media (min-width: 1280px) {
     .grid-sizer,
     .grid-item {
         width: calc((100% - 80px) / 4);
         /* 4 columns */
     }
 }

 /* 4 columns is now the maximum */

 .grid-item.visible {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
 }

 .grid-image,
 .hover-video {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
     border-radius: 15px;
 }