/* =========================================
   ABOUT PAGE — VERTICAL AUTO-SCROLL GALLERY
   Two columns side by side, each column shows
   ~3 images at a time and scrolls continuously.
   ========================================= */

/* Outer wrapper: side-by-side flex layout */
.about-gallery-wrapper {
    display: flex;
    gap: 16px;
    height: 560px;       /* visible window height — ~3 images */
    overflow: hidden;
}

/* Each column takes equal width and clips overflow */
.gallery-col {
    flex: 1;
    overflow: hidden;
    border-radius: 12px;
}

/* The scrolling track inside each column */
.gallery-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: gallery-scroll-up 22s linear infinite;
}

/* Second column scrolls downward (opposite direction) */
.gallery-track-reverse {
    animation: gallery-scroll-down 22s linear infinite;
}

/* Images fill the column width */
.gallery-track img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
}

/* Keyframes — upward scroll (translateY from 0 → -50% loops back seamlessly) */
@keyframes gallery-scroll-up {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* Keyframes — downward scroll (reverse direction) */
@keyframes gallery-scroll-down {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* Pause animation on hover */
.gallery-col:hover .gallery-track {
    animation-play-state: paused;
}