

  /* =============== gallery section start =============== */



  .fashion-gallery-section {

    position: relative;

    border-top: 3px solid;

    border-image: linear-gradient(90deg, #dc2626, #ef4444) 1;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);

    overflow: hidden;

  }



  .fashion-gallery-wrapper {

    width: 90%;

    margin: 0 auto;

    max-width: 1400px;

  }



  .fashion-gallery-viewport {

    position: relative;

    width: 100%;

    height: 700px;

    overflow: hidden;

    margin-top: 2rem;

  }



  .fashion-gallery-grid {

    display: flex;

    gap: 16px;

    height: 100%;

    align-items: flex-start;

  }



  .fashion-gallery-column {

    flex: 1;

    position: relative;

    overflow: hidden;

    height: 100%;

    min-width: 0;

  }



  .gallery-content-track {

    display: flex;

    flex-direction: column;

    gap: 16px;

    will-change: transform;

  }



  .gallery-content-track img,

  .gallery-content-track video {

    width: 100%;

    height: auto;

    /* object-fit: cover;

      overflow: hidden; */

    border-radius: 12px;

    display: block;

    flex-shrink: 0;

  }



  /* Animation Directions */

  .scroll-direction-down .gallery-content-track {

    animation: fashionGalleryScrollDown 50s linear infinite;

  }



  .scroll-direction-up .gallery-content-track {

    animation: fashionGalleryScrollUp 45s linear infinite;

  }



  @keyframes fashionGalleryScrollDown {

    0% {

      transform: translateY(0);

    }



    100% {

      transform: translateY(-50%);

    }

  }



  @keyframes fashionGalleryScrollUp {

    0% {

      transform: translateY(-50%);

    }



    100% {

      transform: translateY(0);

    }

  }



  /* Desktop - Show all 4 columns */

  @media (min-width: 769px) {

    .desktop-view-only {

      display: block;

    }

  }



  /* Tablet & Mobile - Hide columns 3 & 4 */

  @media (max-width: 768px) {

    .desktop-view-only {

      display: none !important;

    }



    .fashion-gallery-wrapper {

      width: 100%;

      padding: 0 12px;

    }



    .fashion-gallery-viewport {

      height: 500px;

      margin-top: 1rem;

    }



    .fashion-gallery-grid {

      gap: 10px;

      justify-content: space-between;

    }



    .fashion-gallery-column {

      flex: 0 0 48%;

      max-width: 48%;

    }



    .gallery-content-track {

      gap: 10px;

    }



    .gallery-content-track img,

    .gallery-content-track video {

      height: auto;

      border-radius: 10px;

    }



    .scroll-direction-down .gallery-content-track {

      animation: fashionGalleryScrollDown 50s linear infinite;

    }



    .scroll-direction-up .gallery-content-track {

      animation: fashionGalleryScrollUp 48s linear infinite;

    }

  }



  /* Small Mobile - 576px */

  @media (max-width: 576px) {

    .fashion-gallery-wrapper {

      padding: 0 10px;

    }



    .fashion-gallery-viewport {

      height: 450px;

    }



    .fashion-gallery-grid {

      gap: 8px;

    }



    .gallery-content-track {

      gap: 12px;

    }



    .gallery-content-track img,

    .gallery-content-track video {

      height: auto;

      border-radius: 8px;

    }



    .scroll-direction-down .gallery-content-track {

      animation: fashionGalleryScrollDown 55s linear infinite;

    }



    .scroll-direction-up .gallery-content-track {

      animation: fashionGalleryScrollUp 52s linear infinite;

    }

  }



  /* Extra Small Mobile - 480px */

  @media (max-width: 480px) {

    .fashion-gallery-wrapper {

      padding: 0 8px;

    }



    .fashion-gallery-viewport {

      height: 420px;

    }



    .fashion-gallery-grid {

      gap: 6px;

    }



    .gallery-content-track {

      gap: 8px;

    }



    .gallery-content-track img,

    .gallery-content-track video {

      height: auto;

      border-radius: 8px;

    }



    .scroll-direction-down .gallery-content-track {

      animation: fashionGalleryScrollDown 60s linear infinite;

    }



    .scroll-direction-up .gallery-content-track {

      animation: fashionGalleryScrollUp 58s linear infinite;

    }

  }



  /* Very Small Mobile (iPhone SE) - 375px */

  @media (max-width: 375px) {

    .fashion-gallery-wrapper {

      padding: 0 6px;

    }



    .fashion-gallery-viewport {

      height: 400px;

    }



    .fashion-gallery-grid {

      gap: 5px;

    }



    .gallery-content-track {

      gap: 9px;

    }



    .gallery-content-track img,

    .gallery-content-track video {

      height: auto;

      border-radius: 6px;

    }



    .scroll-direction-down .gallery-content-track {

      animation: fashionGalleryScrollDown 65s linear infinite;

    }



    .scroll-direction-up .gallery-content-track {

      animation: fashionGalleryScrollUp 62s linear infinite;

    }

  }



  /* Ultra Small Mobile - 360px */

  @media (max-width: 360px) {

    .fashion-gallery-viewport {

      height: 380px;

    }



    .gallery-content-track img,

    .gallery-content-track video {

      height: auto;

    }

  }



  /* Accessibility - Reduced Motion */

  @media (prefers-reduced-motion: reduce) {

    .gallery-content-track {

      animation: none !important;

    }

  }

/* Individual column hover pause */
.fashion-gallery-column:hover .gallery-content-track {
  animation-play-state: paused;
}

