.sw--category,
.sw--cats {
    padding-bottom: 52px;
    position: relative;
    &:before {
        content: "";
        width: clamp(50px, 20vw, 300px);
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(-90deg, white, transparent);
        z-index: 2;
    }
    &:after {
        content: "";
        width: clamp(50px, 20vw, 300px);
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(90deg, white, transparent);
        z-index: 2;
    }
    .cat-items {
        position: relative;
        display: flex;
        border-radius: 32px;
        overflow: hidden;
        .cat-body {
            position: absolute;
            right: 24px;
            bottom: 24px;
            border-radius: 24px;
            .counter-product {
                width: 55px;
                display: flex;
                flex-direction: column;
                height: 55px;
                background: white;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                padding: 12px 9px;
                font-size: 16px;
                font-family: var(--SemiBold);
                margin-bottom: 16px;
                small {
                    font-size: 10px;
                    margin-top: 4px;
                    line-height: 8px;
                }
            }
            .cat-title {
                font-size: 18px;
                font-family: var(--Regular);
                color: var(--black);
                transition: 0.4s;
                line-height: 18px;
            }
            .cat-title-en {
                font-size: 14px;
                color: var(--gray);
                margin-top: 8px;
                display: flex;
                line-height: 16px;
                font-family: var(--en);
            }
        }
    }
    .swiper-slide {
        transition: 0.4s;
    }
    .swiper-slide-active {
        transform: translateY(52px);
        .cat-items {
            .cat-body {
                background: rgb(255 255 255 / 20%);
                padding: 16px 16px 11px;
            }
        }
    }
}
@media only screen and (max-width: 768px) {
    .sw--cats .swiper-slide-active {
        transform: unset;
    }
}