.maincol{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    width:100% !important;
    max-width:100% !important;

    gap:32px !important;

    padding-inline:15vw !important;

    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:15vw !important;
    scroll-behavior:smooth !important;

    -webkit-overflow-scrolling:touch !important;

    scrollbar-width:none !important;
}

.maincol::-webkit-scrollbar{
    display:none;
}

.maincol > .hords{
    flex:0 0 72vw !important;

    width:72vw !important;
    min-width:72vw !important;
    max-width:72vw !important;

    scroll-snap-align:center !important;

    transition:all .35s ease !important;

    transform:scale(.92);
    opacity:.55;
}

.maincol > .hords.active{
    transform:scale(1);
    opacity:1;
}

/* ===============================
   SpectraFlow Navigation
   =============================== */

.sf-nav{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:22px;
    padding-inline:15vw;
}

.sf-prev,
.sf-next{
    width:46px;
    height:46px;
    border-radius:999px;
    border:none;
    background:#f1f3f5;
    color:#111827;
    font-size:20px;
    cursor:pointer;
    transition:all .25s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sf-prev:hover,
.sf-next:hover{
    background:#e5e7eb;
}

.sf-prev:disabled,
.sf-next:disabled{
    opacity:.35;
    cursor:default;
}

.sf-progress{
    flex:1;
    height:3px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
}

.sf-progress-bar{
    width:0%;
    height:100%;
    background:#7E828A;
    border-radius:999px;
    transition:width .25s ease;
}

@media (max-width: 1024px){

.maincol{
    gap:16px !important;
    padding-inline:5vw !important;
    scroll-padding-inline:5vw !important;
}

.maincol > .hords{
    flex:0 0 90vw !important;
    width:90vw !important;
    min-width:90vw !important;
    max-width:90vw !important;

    transform:scale(.97) !important;
    opacity:.78 !important;

    border-radius:22px !important;
}

.maincol > .hords.active{
    transform:scale(1) !important;
    opacity:1 !important;
}

.sf-nav{
    gap:10px !important;
    margin-top:16px !important;
    padding-inline:5vw !important;
}

.sf-prev,
.sf-next{
    width:40px !important;
    height:40px !important;
    font-size:18px !important;
}

.sf-progress{
    width:38% !important;
    flex:0 0 38% !important;
    height:3px !important;
}

}

/* Tablet = Mobile */
@media (min-width:768px) and (max-width:1024px){

    .maincol{
        gap:16px !important;
        padding-inline:5vw !important;
        scroll-padding-inline:5vw !important;
    }

    .maincol > .hords{
        flex:0 0 90vw !important;
        width:90vw !important;
        min-width:90vw !important;
        max-width:90vw !important;

        transform:scale(.97) !important;
        opacity:.78 !important;
    }

    .maincol > .hords.active{
        transform:scale(1) !important;
        opacity:1 !important;
    }

    .sf-nav{
        margin-left:5vw !important;
        gap:10px !important;
    }

    .sf-prev,
    .sf-next{
        width:40px !important;
        height:40px !important;
        font-size:18px !important;
    }

    .sf-progress{
        width:90px !important;
        flex:0 0 90px !important;
    }

}