/* ===================================
   VIEWPORT & HORIZONTAL SCROLL STYLES
   =================================== */

.viewport {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    position: relative;
}

.viewport:active {
    cursor: grabbing;
}

/* Hide scrollbar for clean look */
.viewport::-webkit-scrollbar {
    height: 6px;
}

.viewport::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.viewport::-webkit-scrollbar-thumb {
    background: rgba(224, 197, 34, 0.3);
    border-radius: 3px;
}

.viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(224, 197, 34, 0.5);
}

/* Track - the wide scrollable content container */
.viewport-track {
    width: 4146px;
    max-width: 4146px;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ===================================
   CARDS CONTAINER
   =================================== */

#cards {
    width: 4146px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 30.37%;
    /*bottom: 30%;*/
    display: flex;
    gap: 28px;
    padding-left: 62px;
    transform: translateY(-133px);
    pointer-events: none;
}