.promo {
    margin-bottom: 30px;
    p {
        font-size: 24px;
        letter-spacing: 0.72px;
    }
}
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.72px;
    margin-bottom: 20px;
    &::before {
        font: 100 30px/1 'icon';
        color: inherit;
        width: 40px;
        aspect-ratio: 1;
        flex-shrink: 0;
        display: grid;
        place-items: center;
    }
}
.slider {
    margin-bottom: 30px;
    .hidden-box {
        overflow: hidden;
        .slides {
            display: flex;
            gap: 30px;
            margin-bottom: 20px;
        }
    }
    .bubbles {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 18px;
        gap: 16px;
        div {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--brjyrb, #cacfd2);
            cursor: pointer;
            position: relative;
            &.selected {
                background-color: var(--dgd, #e36a3f);
            }
            &::before {
                content: '';
                position: absolute;
                inset: -5px;
            }
        }
    }
}
.current-promotions {
    .section-title {
        color: var(--blue, #016170);
        &::before {
            content: '\e904';
            font-size: 30px;
        }
    }
    .slides .item {
        border-radius: 20px;
        background: var(--white);
        overflow: hidden;
        flex: 0 0 calc((100% - 60px) / 3);
        .preview {
            position: relative;
            width: 100%;
            min-height: 360px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: flex-start;
            justify-content: space-between;
            padding: 30px 30px 20px;
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(1, 97, 112, 0.00) 54.97%, rgba(1, 97, 112, 0.90) 99.75%);
                z-index: 2;
            }
            img {
                position: absolute;
                inset: 0;
                z-index: 1;
                height: 100%;
                object-fit: cover;
            }
            > div {
                position: relative;
                z-index: 3;
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.60);
                backdrop-filter: blur(5px);
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                justify-items: center;
                padding: 10px 30px;
                gap: 6px 10px;
                > p {
                    grid-column: 1/-1;
                    color: var(--text);
                    text-align: center;
                    font-size: 14px;
                    font-weight: 700;
                    letter-spacing: 0.14px;
                }
                > div {
                    display: grid;
                    justify-items: center;
                    div {
                        border-radius: 6px;
                        border: 1px solid #00000000;
                        background: linear-gradient(var(--white), var(--white)) padding-box,
                            linear-gradient(to top, rgba(228, 92, 43, 0.4), rgba(254, 254, 254, 0.4)) border-box;
                        padding: 7px 6px;
                        color: var(--orange, rgb(228, 92, 43));
                        font-size: 20px;
                        font-weight: 700;
                        letter-spacing: 0.2px;
                        margin-bottom: 4px;
                    }
                    span {
                        color: var(--text, #6c777b);
                        text-align: center;
                        font-size: 12px;
                        font-weight: 500;
                        letter-spacing: -0.48px;
                        text-transform: uppercase;
                    }
                }
            }
            h3 {
                color: var(--white);
                font-size: 40px;
                font-weight: 700;
                letter-spacing: 0.4px;
                position: relative;
                z-index: 3;
                margin-top: auto;
            }
        }
        .preview + div {
            padding: 20px 30px 30px;
            p {
                font-size: 20px;
                font-weight: 500;
                letter-spacing: 0.2px;
                margin-bottom: 20px;
            }
            ul {
                padding-left: 25px;
                display: flex;
                flex-direction: column;
                gap: 6px;
                margin-bottom: 30px;
                li {
                    color: var(--text, #6c777b);
                }
            }
        }
    }
}
.special-offers {
    .section-title {
        color: var(--orange, #e45c2b);
        &::before {
            content: '\e903';
            font-size: 40px;
        }
    }
    .slides .item {
        flex: 0 0 calc(50% - 15px);
        display: grid;
        grid-template-columns: 1fr 44.7%;
        gap: 10px;
        border-radius: 20px;
        background: #FFF;
        overflow: hidden;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            z-index: 1;
            inset: -5px;
            left: 40%;
            background: rgba(255, 255, 255, 0.1);
            mask: linear-gradient(to right, #000 26%, #00000000);
            filter: blur(35px);
            backdrop-filter: blur(25px);
        }
        .content {
            padding: 30px;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
            h3 {
                color: var(--orange, #e45c2b);
                font-size: 24px;
                font-weight: 700;
                letter-spacing: 0.24px;
            }
            > p {
                font-size: 20px;
                font-weight: 500;
                letter-spacing: 0.2px;
                margin-bottom: 10px;
            }
            > div {
                display: flex;
                gap: 20px;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: 30px;
                p {
                    color: var(--2, #8E9FA6);
                    font-size: 14px;
                    font-weight: 700;
                    letter-spacing: 0.14px;
                }
                span {
                    color: var(--2, #8E9FA6);
                    font-size: 32px;
                    font-weight: 700;
                    letter-spacing: 0.32px;
                }
                .old-price {
                    text-decoration-line: line-through;
                    font-size: 24px;
                }
                > div:first-of-type {
                    padding: 10px;
                    border-radius: 12px;
                    background: var(--122, #eaecec);
                    p,
                    span {
                        color: var(--orange, #e45c2b);
                    }
                }
            }
            .green-btn {
                background-color: var(--orange);
                margin-top: auto;
            }
        }
        .img {
            position: relative;
            img {
                position: absolute;
                inset: 0;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
.archive-offers {
    margin-bottom: 60px;
    position: relative;
    overflow: hidden;
    .section-title {
        &::before {
            content: '\e925';
            font-size: 30px;
        }
    }
    .items {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 30px;
        & .item:nth-child(n + 9) {
            max-height: 0px;
            margin-bottom: 0;
            opacity: 0;
        }
        .item {
            margin-bottom: 30px;
            border-radius: 20px;
            background: linear-gradient(127deg, #E4E4E4 5.28%, #D7D7D7 98.56%);
            transition: .3s linear;
            > div {
                padding: 30px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                height: 100%;
                h3 {
                    font-size: 24px;
                    font-weight: 700;
                    margin-bottom: 20px;
                }
                p {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    margin-bottom: 4px;
                    margin-top: auto;
                    &::before {
                        content: '\e92d';
                        font: 100 24px/1 'icon';
                        color: #6c777b;
                    }
                }
            }
        }
    }
    .show-all {
        margin: 0 auto;
        width: fit-content;
        display: none;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 3;
        &::after {
            content: '\e922';
            font: 100 20px/1 'icon';
            color: inherit;
            width: 30px;
            height: 27px;
            flex-shrink: 0;
            border-radius: 10px;
            border: 1px solid #e4e4e4;
            display: grid;
            place-items: center;
            transition: .3s linear;
        }
    }
    &.show {
        .items {
            & .item:nth-child(n + 7) {
                max-height: 500px;
                margin-bottom: 30px;
                opacity: 1;
            }
        }
        .show-all::after {
            transform: scaleY(-1);
        }
    }
}
@media screen and (max-width: 1500px) {
    .special-offers .slides .item {
        flex-basis: 100%;
    }
    .archive-offers .items {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        & .item:nth-child(n + 7) {
            max-height: 0px;
            margin-bottom: 0;
            opacity: 0;
        }
    }
}
@media screen and (max-width: 1280px) {
    .current-promotions .slides .item {
        flex-basis: calc((100% - 30px) / 2);
    }
}
@media screen and (max-width: 768px) {
    .promo p {
        font-size: 16px;
        letter-spacing: 0.48px;
    }
    .slider {
        margin-inline: -10px;
        .hidden-box .slides {
            margin-inline: 10px;
            gap: 10px;
        }
    }
    .section-title {
        font-size: 16px;
        letter-spacing: 0.48px;
        &::before {
            font-size: 20px;
            width: 24px;
        }
    }
    .current-promotions {
        .slides .item {
            flex-basis: calc(100% - 10px);
            .preview {
                min-height: 340px;
                padding: 20px;
                h3 {
                    font-size: 24px;
                    letter-spacing: 0.24px;
                }
            }
            .preview + div {
                padding: 20px;
                p {
                    font-size: 16px;
                    letter-spacing: 0.16px;
                }
            }
        }
    }
    .special-offers {
        .slides .item {
            flex-basis: calc(100% - 10px);
            grid-template-columns: 1fr;
            &::before {
                content: '';
                position: absolute;
                z-index: 1;
                inset: -5px;
                height: 500px;
                background: rgba(255, 255, 255, 0.1);
                mask: linear-gradient(to top, #000 60%, var(--no-color));
                filter: blur(35px);
                backdrop-filter: blur(25px);
            }
            .content {
                padding: 0 20px 30px;
                h3 {
                    font-size: 20px;
                    letter-spacing: 0.2px;
                }
                > p {
                    font-size: 16px;
                    letter-spacing: 0.16px;
                }
                > div {
                    margin-bottom: 20px;
                    span {
                        font-size: 28px;
                    }
                    .old-price {
                        font-size: 20px;
                    }
                }
            }
            .img {
                position: relative;
                height: 250px;
                grid-row: 1;
                img {
                    position: absolute;
                    inset: 0;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
    .archive-offers {
        .items {
            grid-template-columns: 1fr;
            gap: 0;
            .item {
                margin-bottom: 10px;
                > div {
                    padding: 20px;
                }
            }
        }
        .show-all {
            margin: 10px auto 0;
        }
        &.show .items .item:nth-child(n + 7) {
            margin-bottom: 10px;
        }
    }
}