index-main/assets/css/components/_swiper.scss

.swiper {


    --slide-padding: 30px;


    .swiper-button-prev,
    .swiper-button-next {
        --swiper-navigation-size: 32px;
        color: var(--color-txt);
        background-color: var(--color-bg);
        height: 100%;
        width: var(--slide-padding);
        top: 0px!important;
        height: calc(100% - var(--spacing)*1);
        // background-color: red;

        svg {
            width: 14px;
        }

        &.swiper-button-disabled {
            opacity: 1;

            svg {
                opacity: 0.05;
            }
        }
    }

    .swiper-button-prev {
        left: 0px!important;
        top: 0px;
        justify-content: flex-start;
    }

    .swiper-button-next {
        right: 0px!important;
        top: 0px;
        justify-content: flex-end;
  
    }

    .swiper-slide {
        padding-left: var(--slide-padding);
        padding-right: var(--slide-padding);
    }

    .swiper-pagination {
        position: relative;
        margin-top: 0px!important;
        margin-top: calc(var(--spacing)*0.5)!important;

        .swiper-pagination-bullet {
            width: 15px;
            height: 4px;
            border-radius: 2px;
            background: var(--color-txt-light);
        }

        .swiper-pagination-bullet-active {
            background: var(--color-txt);
        }
    }

    @media #{$x-small} {

        .swiper-button-prev,
        .swiper-button-next {
            display: none;
        }

        .swiper-slide {
            padding: 0px;
        }
    }
}