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

.viewport {
    width: 100vw;
    /* height: 100vh; */
    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: 420px;
    position: absolute;
    left: 0;
    top: 20%;
    display: flex;
    gap: 50px;
    padding-left: 150px;
}