.swip {
    position: relative;
    left: 0;
    top: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    --side-padding: .75rem;
    overscroll-behavior: none;
}

.swip ul li {
    scroll-snap-align: start;
}

.swip ul li:first-child {
    padding-left: var(--side-padding);
}

@media (min-width: 576px) {
    .swip {
        --side-padding: round(down, calc((100vw - 516px) / 2), 1px);
    }
}

@media (min-width: 768px) {
    .swip {
        --side-padding: round(down, calc((100vw - 696px) / 2), 1px);
    }
}

@media (min-width: 992px) {
    .swip {
        --side-padding: round(down, calc((100vw - 936px) / 2), 1px);
    }

    .swip ul li:last-child {
        padding-right: var(--side-padding);
    }
}

@media (min-width: 1200px) {
    .swip {
        --side-padding: round(down, calc((100vw - 1140px) / 2), 1px);
    }
}

@media (min-width: 1400px) {
    .swip {
        --side-padding: round(down, calc((100vw - 1296px) / 2), 1px);
    }
}