.title {
    margin-bottom: 50px;
}
.promo {
    display: grid;
    grid-template-columns: 1fr 432px;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 60px;
    min-height: 560px;
    img {
        border-radius: 16px;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    a.green-btn {
        position: relative;
        z-index: 1;
        font-size: 18px;
        font-weight: 700;
        padding: 5px 10px 5px 30px;
        gap: 30px;
        width: fit-content;
        border-radius: 12px;
        &::after {
            content: '\e922';
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            transform: rotate(-90deg);
        }
    }
    .slider-promo {
        border-radius: 16px;
        background: var(--white);
        overflow-x: hidden;
        position: relative;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0) 37.32%, rgba(0, 0, 0, 0.8) 100%);
        .slides {
            display: flex;
            height: 100%;
            .item {
                position: relative;
                flex: 1 0 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: center;
                height: 100%;
                div {
                    padding-left: 40px;
                    position: relative;
                    z-index: 1;
                    h2 {
                        color: var(--grey-white);
                        font-size: 40px;
                        font-weight: 900;
                        letter-spacing: 1.2px;
                        margin-bottom: 6px;
                    }
                    p {
                        color: var(--grey-white);
                        font-size: 20px;
                        font-weight: 500;
                        letter-spacing: 0.6px;
                        margin-bottom: 26px;
                    }
                    a.green-btn {
                        background: var(--orange);
                    }
                }
            }
        }
        .bubbles {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-flex;
            padding: 12px 18px;
            gap: 16px;
            border-radius: 10px;
            background: rgba(24, 24, 24, 0.4);
            z-index: 1;
            div {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: var(--white);
                cursor: pointer;
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    inset: -5px;
                }
                &.selected {
                    background-color: var(--dgd);
                }
            }
        }
        .controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            display: flex;
            justify-content: space-between;
            .arrow::before {
                border: 1px solid var(--grey-white);
            }
        }
    }
    .banner {
        position: relative;
        display: flex;
        align-items: flex-end;
        border-radius: 16px;
        overflow: hidden;
        div {
            padding: 20px;
            position: relative;
            width: 100%;
            p {
                position: relative;
                z-index: 1;
                color: var(--blue);
                font-size: 24px;
                font-weight: 700;
                letter-spacing: 0.72px;
                margin-bottom: 10px;
            }
            &::before {
                content: '';
                position: absolute;
                top: -150px;
                left: -63px;
                right: -44px;
                bottom: -89px;
                background: rgba(255, 255, 255, 0.3);
                mask: linear-gradient(to top, #000 55%, var(--no-color));
                filter: blur(35px);
                backdrop-filter: blur(5px);
            }
        }
    }
}
.product-categories {
    position: relative;
    margin-bottom: 60px;
    .categories {
        position: relative;
        display: grid;
        grid-template-rows: minmax(278px, 0fr);
        overflow: hidden;
        transition: .5s linear;
        padding-bottom: 80px;
        margin-inline: -30px;
        padding-inline: 30px;
        .items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
            gap: 30px;
        }
        .item {
            position: relative;
            height: 278px;
            border-radius: 16px;
            overflow: hidden;
            display: grid;
            grid-template-rows: 1fr 78px;
            justify-items: center;
            align-items: center;
            z-index: 1;
            border: none;
            transition: box-shadow .3s linear, z-index .3s linear;
            &::after {
                content: attr(data-count);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
                width: 65px;
                grid-row: 1/2;
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 16px;
                background: rgba(241, 243, 243, 0.85);
                color: var(--blue);
                text-align: center;
                font-size: 20px;
                font-weight: 600;
                opacity: 0;
                transition: opacity .3s linear;
            }
            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: -1;
            }
            span {
                display: grid;
                margin-top: auto;
                place-items: center;
                width: calc(100% + 2px);
                left: -1px;
                height: 100%;
                grid-row: 2/3;
                padding: 10px;
                background-color: rgba(255, 255, 255, 0.85);
                color: var(--grey);
                font-weight: 700;
                letter-spacing: 0.48px;
                transition: background-color .3s linear, color .3s linear;
            }
        }
    }
    .show-all {
        margin: -50px auto 0;
        position: relative;
        z-index: 2;
        width: fit-content;
        button {
            padding: 11px 30px;
            color: var(--grey);
            font-weight: 600;
            align-items: center;
            gap: 8px;
            position: relative;
            z-index: 3;
            display: flex;
            &::after {
                content: '\e922';
                display: grid;
                place-items: center;
                font: 100 20px/1 'icon';
                color: inherit;
                width: 30px;
                height: 27px;
                flex-shrink: 0;
                border-radius: 10px;
                border: 1px solid var(--border);
                transition: .3s linear;
            }

        }
        &::before {
            content: '';
            position: absolute;
            width: 100vw;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 70px;
            background-color: var(--grey-white);
            z-index: 1;
        }
    }
    &.show {
        .categories {
            grid-template-rows: minmax(308px, 1fr);
        }
        .show-all button::after {
            transform: scaleY(-1);
        }
    }
}
.advantages-info {
    h2 {
        text-align: center;
    }
    .items {
        display: flex;
        gap: 30px;
        padding-top: 50px;
        > div {
            flex: 1 0;
            border-radius: 16px;
            background: var(--white);
            padding: 0 30px 40px;
            .top {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 17px;
                min-height: 170px;
                max-width: 288px;
                background: var(--blue);
                border-radius: 16px;
                padding: 25px 30px 20px;
                margin: -50px 0 37px;
                overflow: hidden;
                &::before {
                    position: relative;
                    z-index: 1;
                    font: 100 60px/1 icon;
                    color: var(--white);
                    align-self: end;
                }
                span {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    color: var(--white);
                    font-size: 200px;
                    font-weight: 700;
                    opacity: .1;
                }
                h3 {
                    position: relative;
                    z-index: 1;
                    max-width: 124px;
                    color: var(--grey-white);
                    font-size: 20px;
                    font-weight: 700;
                }
            }
            &.delivery .top::before {
                content: '\e91c';
            }
            &.quality .top::before {
                content: '\e91b';
            }
            &.prices .top::before {
                content: '\e91a';
            }
            &.products .top::before {
                content: '\e919';
            }
            &:where(:nth-child(3), :nth-child(4)) .top {
                background: var(--orange);
            }
            p {
                color: var(--grey);
            }
        }
    }
}
.blog {
    h2 {
        text-align: center;
    }
    .items {
        display: flex;
        gap: 30px;
        margin-bottom: 50px;
        .item {
            flex: 1 1 auto;
            max-width: 588px;
            container: blog-container / inline-size;
            border-radius: 16px;
            background: var(--white);
            display: grid;
            grid-template-columns: .43fr .57fr;
            overflow: hidden;
            img {
                height: 100%;
                object-fit: cover;
            }
            .box {
                padding: 20px;
                display: flex;
                flex-direction: column;
                h3 {
                    color: var(--grey);
                    font-size: 20px;
                    font-weight: 700;
                    margin-bottom: 6px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    line-clamp: 4;
                }
                div {
                    color: var(--grey);
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    line-clamp: 4;
                    margin-bottom: 10px;
                    * {
                        display: contents;
                    }
                }
                a {
                    display: flex;
                    align-items: center;
                    color: var(--t);
                    font-size: 18px;
                    font-weight: 500;
                    margin: auto 0 0 auto;
                    &::after {
                        content: '\e922';
                        font: 100 1em/1 icon;
                        transform: rotate(-90deg);
                        color: inherit;
                    }
                }
            }
        }
    }
    .green-btn {
        width: fit-content;
        padding-inline: 30px;
        margin-inline: auto;
        font-size: 18px;
        border-radius: 12px;
    }
}
.reviews {
    .title {
        text-align: center;
    }
    .slider {
        overflow-x: hidden;
        position: relative;
        .slides {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
            .item {
                flex: 0 0 432px;
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                padding: 30px;
                border-radius: 16px;
                background: var(--white);
                align-items: center;
                img {
                    width: 70px;
                    height: 70px;
                    border-radius: 16px;
                    object-fit: cover;
                }
                > p,
                span {
                    font-size: 16px;
                    font-weight: 400;
                }
                p {
                    width: 100%;
                }
                .stars {
                    display: flex;
                    align-items: center;
                    span {
                        width: 16px;
                        height: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        &::before {
                            content: '\e933';
                            font: 100 14px/1 icon;
                            color: var(--yellow);
                        }
                    }
                }
                > span {
                    margin-left: auto;
                }
            }
        }
    }
}
:is(.advantages-info, .blog, .reviews) {
    margin-bottom: 120px;
}
@container blog-container (width < 450px) {
    .blog .items .item > * {
        grid-column: 1/-1;
        img {
            aspect-ratio: 2/1;
        }
    }
}
@media screen and (max-width: 1500px) {
    .advantages-info .items {
        gap: 20px;
        > div {
            padding: 0 20px 30px;
        }
    }
    .title {
        margin-bottom: 30px;
    }
    .blog .items {
        gap: 10px;
        margin-bottom: 30px;
    }
    :where(.advantages-info, .blog, .reviews) {
        margin-bottom: 100px;
    }
}
@media screen and (max-width: 1280px) {
    .title {
        margin-bottom: 20px;
    }
    .promo {
        grid-template-columns: 1fr 332px;
        gap: 20px;
        min-height: 360px;
        .slider-promo .slides .item div {
            padding-left: 20px;
            h2 {
                font-size: 30px;
            }
            p {
                font-size: 18px;
            }
        }
        .banner div {
            padding: 10px;
            p {
                font-size: 20px;
                letter-spacing: 0.6px;
            }
        }
    }
    .product-categories .categories {
        margin-inline: -20px;
        padding-inline: 20px;
    }
    .advantages-info .items {
        flex-wrap: wrap;
        row-gap: 70px;
        > div {
            flex: 1 1 calc(50% - 10px);
            .top {
                margin-bottom: 20px;
            }
        }
    }
    :is(.advantages-info, .blog, .reviews) {
        margin-bottom: 80px;
    }
}
@media screen and (max-width: 992px) {
    .product-categories .categories {
        margin-inline: 0;
        padding-inline: 0;
    }
    .blog .items {
        margin-inline: -10px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        &::-webkit-scrollbar {
            display: none;
        }
        .item {
            width: min(340px, calc(100vw - 50px));
            flex-shrink: 0;
            scroll-snap-align: center;
            &:first-child {
                margin-left: 10px;
            }
            &:last-child {
                margin-right: 10px;
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .promo {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
        min-height: auto;
        a.green-btn {
            font-size: 16px;
            min-height: 44px;
        }
        .slider-promo {
            border-radius: 20px;
            background: var(--white);
            min-height: 376px;
            .slides {
                height: 100%;
                gap: 10px;
                .item {
                    img {
                        border-radius: 0;
                        position: relative;
                        height: 200px;
                        z-index: 1;
                    }
                    div {
                        padding: 20px 10px 60px;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 100%;
                        h2 {
                            color: var(--grey);
                            font-size: 24px;
                            letter-spacing: 0.72px;
                            margin-bottom: 4px;
                        }
                        p {
                            color: var(--grey);
                            font-size: 16px;
                            letter-spacing: 0.48px;
                            margin-bottom: 20px;
                        }
                    }
                }
            }
            .bubbles {
                bottom: 10px;
                background: none;
                div {
                    background-color: var(--line, #e4e4e4);
                    &.selected {
                        background-color: var(--dgd, #e36a3f);
                    }
                }
            }
            .controls {
                display: none;
            }
        }
        .banner {
            min-height: 261px;
        }
    }
    .advantages-info {
        h2 {
            text-align: left;
        }
        .items {
            flex-wrap: wrap;
            row-gap: 60px;
            > div {
                flex: 1 1 auto;
                min-width: initial;
                padding: 0 10px 20px;
                .top {
                    min-height: initial;
                    padding: 25px 30px 10px 10px;
                    gap: 16px;
                    h3 {
                        max-width: initial;
                    }
                    span {
                        transform: translateY(15%);
                    }
                }
            }
        }
    }
    .blog {
        h2 {
            text-align: left;
        }
        .items {
            margin-bottom: 20px;
            .item {
                img {
                    aspect-ratio: 1;
                }
                .box {
                    padding: 20px 10px;
                    a {
                        font-size: 14px;
                    }
                }
            }
        }
        .green-btn {
            font-size: 14px;
            min-height: 40px;
        }
    }
    .reviews .slider .slides {
        /* width: max-content; */
        gap: 10px;
        margin-bottom: 20px;
        padding-right: 10px;
        .item {
            max-width: calc(100vw - 40px);
        }
    }
    :is(.advantages-info, .blog, .reviews) {
        margin-bottom: 60px;
    }
}
@media (hover:hover) {
    .promo .slider-promo .slides .item a.green-btn:hover {
        background-color: var(--blue, #016170);
    }
    .product-categories .item:hover {
        z-index: 5;
        box-shadow: var(--shadow);
        &::after {
            opacity: 1;
        }
        span {
            background-color: rgba(1, 97, 112, 0.85);
            color: var(--white);
        }
    }
    .blog .items .item .box a:hover {
        color: var(--orange);
    }
}