@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/inter.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


:root {
    --color-background-01: #0A0A0A;
    --color-background-02: rgba(10, 10, 10, 0.70);

    --color-white-02: rgba(255, 255, 255, 0.025);
    --color-white-04: rgba(255, 255, 255, 0.04);
    --color-white-06: rgba(255, 255, 255, 0.06);
    --color-white-08: rgba(255, 255, 255, 0.08);

    --color-ink-01: #F5F5F2;
    --color-ink-02: #A0A09B;
    --color-ink-03: #6B6B66;

    --color-line-01: #262626;
    --color-line-02: #2E2E2E;

    --color-accent-01: #FF3355;
    --color-accent-02: #FF5577;
    --color-accent-03: #FF1A40;
    --color-accent-04: rgba(255, 51, 85, .35);

    --padding-x: clamp(20px, calc(20px + (120 - 20) * ((100vw - 720px) / (1920 - 720))), 120px);
    --padding-y: clamp(50px, 3.8vw, 70px);

    --space-12-8: clamp(8px,  0.7vw, 12px);
    --space-14-10: clamp(10px, 0.85vw, 14px);
    --space-14-12: clamp(12px, 1.1vw, 14px);
    --space-16-14: clamp(14px, 1.1vw, 16px);
    --space-18-16: clamp(16px, 1.15vw, 18px);
    --space-28-20: clamp(20px, 1.7vw, 28px);
    --space-30-20: clamp(20px, 1.75vw, 30px);
    --space-36-28: clamp(28px, 2.4vw, 36px);
    --space-36-32: clamp(32px, 2.5vw, 36px);

    --font-12-10: clamp(10px, 0.85vw, 12px);
    --font-14-12: clamp(12px, 1.05vw, 14px);
    --font-14-13: clamp(13px, 1.1vw, 14px);
    --font-16-13: clamp(13px, 1.1vw, 16px);
    --font-16-14: clamp(14px, 1.2vw, 16px);
    --font-18-16: clamp(16px, 1.3vw, 18px);
    --font-20-16: clamp(16px, 1.4vw, 20px);
    --font-20-18: clamp(18px, 1.45vw, 20px);
    --font-24-20: clamp(20px, 1.7vw, 24px);
    --font-48-24: clamp(24px, 2.9vw, 48px);
    --font-48-30: clamp(30px, 2.9vw, 48px);
    --font-64-24: clamp(24px, 3.6vw, 64px);
}


::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--color-line-01);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent-02);
}


* {
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    font-style: normal;
}


h1,
h2 {
    margin: 0;
    text-indent: -0.04em;
    letter-spacing: 1px;
}

h3,
h4 {
    margin: 0;
    text-indent: -0.02em;
    letter-spacing: 1px;
}

p {
    margin: 0;
    color: var(--color-ink-02);
}


body {
    margin: 0;
    padding: 0;
    color: var(--color-ink-01);
    background: var(--color-background-01);
}


.cookie {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    justify-items: center;
    background: var(--color-background-02);
    backdrop-filter: blur(10px);
    z-index: 2;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: 18px var(--padding-x);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 75px;
    }

    .text {
        font-size: var(--font-14-12);
        font-weight: 300;
        line-height: 125%;

        a {
            color: var(--color-ink-01);
        }
    }

    .buttons {
        display: flex;
        gap: 14px;

        button {
            padding: var(--space-16-14) 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: inherit;
            font-size: 13px;
            font-weight: 700;
            border: none;
            transition: background-color 0.2s, box-shadow 0.2s;
            text-decoration: none;
            cursor: pointer;

            &.confirm {
                padding: var(--space-16-14) var(--space-36-28);
                background-color: var(--color-accent-01);

                &:hover {
                    background-color: var(--color-accent-03);
                    box-shadow: 0 0 14px var(--color-accent-04);
                }
            }

            &.deny {
                background-color: var(--color-white-02);

                &:hover {
                    background-color: var(--color-white-08);
                }
            }
        }
    }

    &.hidden {
        display: none;
    }
}


header {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x) var(--space-30-20) var(--padding-x);
        display: flex;
        gap: 10px;
    }

    .back {
        padding: var(--space-30-20);
        display: flex;
        align-items: center;
        gap: var(--space-30-20);
        font-size: var(--font-18-16);
        font-weight: 700;
        color: inherit;
        border: none;
        background-color: var(--color-white-02);
        transition: background-color 0.2s;
        cursor: pointer;

        .icon {
            margin-top: -3px;
            font-size: var(--font-20-18);
            font-weight: 800;
        }

        &:hover {
            background-color: var(--color-white-08);
        }
    }

    .title {
        padding: 20px var(--space-30-20);
        flex: 1;
        font-size: var(--font-48-24);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        text-transform: uppercase;
        background-color: var(--color-accent-01);
    }
}

footer {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--space-30-20) var(--padding-x) var(--padding-y) var(--padding-x);
        display: flex;
        gap: 10px;
    }

    .name {
        padding: var(--space-30-20);
        display: flex;
        align-items: center;
        font-size: var(--font-18-16);
        font-weight: 800;
        color: var(--color-accent-01);
        background-color: var(--color-white-02);
    }

    .link {
        padding: var(--space-30-20);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        font-size: var(--font-18-16);
        font-weight: 700;
        line-height: 130%;
        color: inherit;
        background-color: var(--color-white-02);
        transition: background-color 0.2s;
        text-decoration: none;

        .icon {
            margin-top: -3px;
            font-size: var(--font-20-18);
            font-weight: 800;
        }

        &:last-child {
            flex: 1;
        }

        &:hover {
            background-color: var(--color-white-08);
        }
    }
}


main.hero {
    position: relative;
    min-height: 600px;
    height: 100svh;
    align-content: center;
    justify-items: center;
    overflow: hidden;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: 0 var(--padding-x);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .background {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% center;
        pointer-events: none;
        z-index: 0;
    }

    .gradient {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(to top, var(--color-background-01) 0%, rgba(10, 10, 10, 0.85) 8%, rgba(10, 10, 10, 0) 25%),
            linear-gradient(to right, var(--color-background-01) 0%, var(--color-background-01) 36%, rgba(10, 10, 10, 0.9) 48%, rgba(10, 10, 10, 0.4) 65%, rgba(10, 10, 10, 0) 85%);
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: var(--space-36-28);
        z-index: 1;

        .top {
            .subtitle {
                margin-bottom: 14px;
                font-size: var(--font-20-16);
                font-weight: 800;
                color: var(--color-accent-01);
            }

            .title {
                font-size: var(--font-64-24);
                font-weight: 800;
                line-height: 110%;

                span {
                    color: var(--color-accent-01);
                }
            }
        }

        .description {
            max-width: 57ch;
            font-size: var(--font-16-13);
            font-weight: 300;
            line-height: 140%;
        }

        .cta {
            display: flex;
            gap: var(--space-14-12);

            .button {
                padding: var(--space-18-16) var(--space-30-20);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: var(--font-14-13);
                font-weight: 600;
                color: var(--color-ink-01);
                transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
                text-decoration: none;
                overflow: hidden;

                &.pink {
                    background-color: var(--color-accent-01);

                    &:hover {
                        background-color: var(--color-accent-03);
                        box-shadow: 0 0 14px var(--color-accent-04);
                    }
                }

                &.grey {
                    background-color: var(--color-white-04);

                    &:hover {
                        color: var(--color-ink-01);
                        background-color: var(--color-white-08);
                    }
                }
            }
        }
    }
}


section.offers {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(6, 1fr);

        .card {
            padding: 36px var(--space-30-20);
            grid-column: span 3;
            background-color: var(--color-white-02);

            .top {
                margin-bottom: 20px;

                .title {
                    margin-bottom: var(--space-12-8);
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 120%;
                    text-wrap: balance;
                }

                .description {
                    max-width: 50ch;
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 130%;
                    letter-spacing: 0.2px;
                    text-wrap: balance;
                }
            }

            .bottom {
                padding-top: 20px;
                display: flex;
                flex-direction: column;
                gap: 8px;
                border-top: 1px solid var(--color-line-01);

                .item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-weight: 300;
                    color: var(--color-ink-02);
                    letter-spacing: 0.2px;

                    &::before {
                        content: "";
                        width: 12px;
                        height: 2px;
                        margin-right: 10px;
                        flex-shrink: 0;
                        background-color: var(--color-accent-01);
                    }
                }
            }
        }
    }

    &.b {
        .grid {
            .card {
                &:nth-child(1),
                &:nth-child(2) {
                    grid-column: span 3;
                }

                &:nth-child(3),
                &:nth-child(4),
                &:nth-child(5) {
                    grid-column: span 2;
                }
            }
        }
    }
}

section.services {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);

        .card {
            padding: 36px var(--space-30-20);
            background-color: var(--color-white-02);

            .title {
                margin-bottom: var(--space-12-8);
                font-size: 20px;
                font-weight: 700;
                line-height: 120%;
                text-wrap: balance;
            }

            .description {
                font-size: 14px;
                font-weight: 300;
                line-height: 130%;
                letter-spacing: 0.2px;
            }
        }
    }
}

section.cases {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .grid {
        margin-bottom: 20px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr); 

        .card {
            height: 520px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            color: inherit;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: cover;
            animation: caseCardScroll 10s linear infinite;
            animation-play-state: paused;
            text-decoration: none;
            overflow: hidden;

            .hover {
                padding: 20px var(--space-30-20);
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: var(--color-background-02);
                backdrop-filter: blur(10px);

                .about {
                    text-transform: uppercase;

                    .name {
                        margin-bottom: 3px;
                        font-size: var(--font-16-14);
                        font-weight: 600;
                    }

                    .details {
                        font-size: var(--font-12-10);
                        font-weight: 300;
                    }
                }

                .icon {
                    margin-top: -3px;
                    font-size: var(--font-20-18);
                    font-weight: 800;
                }
            }

            &:hover {
                animation-play-state: running;
            }
        }
    }

    .cta {
        padding: var(--space-30-20);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        background-color: var(--color-white-02);
        color: inherit;
        transition: background-color 0.2s;
        text-decoration: none;

        .text {
            font-size: var(--font-18-16);
            font-weight: 700;
            line-height: 140%;
        }

        .icon {
            margin-top: -3px;
            font-size: var(--font-20-18);
            font-weight: 800;
        }

        &:hover {
            background-color: var(--color-white-08);
        }
    }
}

section.process {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);

        .card {
            padding: 36px var(--space-30-20);
            background-color: var(--color-white-02);

            .head {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .number,
                .duration {
                    font-size: var(--font-14-13);
                }

                .number {
                    font-weight: 700;
                    color: var(--color-accent-01);
                }

                .duration {
                    color: var(--color-ink-03);
                }
            }

            .main {
                margin-bottom: 22px;

                .title {
                    margin-bottom: 4px;
                    font-size: 22px;
                    font-weight: 700;
                    line-height: 120%;
                    text-wrap: balance;
                }

                .description {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 130%;
                    letter-spacing: 0.2px;
                    text-wrap: balance;
                }
            }

            .bottom {
                padding-top: 22px;
                display: flex;
                flex-direction: column;
                gap: 20px;
                border-top: 1px solid var(--color-line-01);

                .item {
                    .name {
                        margin-bottom: 3px;
                        font-size: var(--font-12-10);
                        font-weight: 700;
                        color: var(--color-ink-03);
                    }

                    .description {
                        font-size: var(--font-14-12);
                        color: var(--color-ink-02);
                    }
                }
            }
        }
    }
}

section.prices {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .grid {
        margin-bottom: 20px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);

        .card {
            padding: 36px var(--space-30-20) 28px var(--space-30-20);
            background-color: var(--color-white-02);

            .top {
                margin-bottom: 24px;

                .title {
                    margin-bottom: 8px;
                    font-size: 22px;
                    font-weight: 800;
                    line-height: 120%;
                }

                .description {
                    max-width: 40ch;
                    font-size: 14px;
                    font-weight: 300;
                    letter-spacing: 0.2px;
                    text-wrap: balance;
                }
            }

            .middle {
                padding-bottom: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid var(--color-line-01);

                .price {
                    font-size: 30px;
                    font-weight: 800;
                }

                .duration {
                    font-size: 13px;
                    color: var(--color-ink-03);
                }
            }

            .bottom {
                margin-bottom: 30px;
                padding-top: 24px;
                display: flex;
                flex-direction: column;
                gap: 10px;

                .item {
                    display: flex;
                    align-items: center;
                    font-size: 13px;
                    font-weight: 300;
                    letter-spacing: 0.2px;

                    &::before {
                        content: "";
                        width: 12px;
                        height: 2px;
                        margin-right: 10px;
                        background-color: var(--color-line-02);
                    }
                }
            }

            .button {
                margin-top: 8px;
                padding: 16px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: inherit;
                font-size: 13px;
                font-weight: 700;
                background-color: var(--color-white-02);
                transition: background-color 0.2s, box-shadow 0.2s;
                text-decoration: none;
                cursor: pointer;

                &:hover {
                    background-color: var(--color-white-08);
                }
            }

            &.highlighted {
                background-color: var(--color-white-06);

                .bottom {
                    .item {
                        &::before {
                            background-color: var(--color-accent-01);
                        }
                    }
                }

                .button {
                    background-color: var(--color-accent-01);

                    &:hover {
                        background-color: var(--color-accent-03);
                        box-shadow: 0 0 14px var(--color-accent-04);
                    }
                }
            }
        }
    }

    .cta {
        padding: var(--space-30-20);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        background-color: var(--color-white-02);
        color: inherit;
        text-decoration: none;
        transition: background-color 0.2s;

        .text {
            font-size: var(--font-18-16);
            font-weight: 700;
            line-height: 140%;
        }

        .icon {
            margin-top: -3px;
            font-size: var(--font-20-18);
            font-weight: 800;
        }

        &:hover {
            background-color: var(--color-white-08);
        }
    }
}

section.faq {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .list {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .card {
            background-color: var(--color-white-02);
            transition: background-color 0.2s;
            cursor: pointer;

            .head {
                padding: 22px var(--space-30-20);
                display: flex;
                align-items: center;
                gap: 40px;
                transition: padding 0.2s;
                user-select: none;
                -webkit-user-select: none;

                .name {
                    flex: 1;
                    font-size: var(--font-18-16);
                    font-weight: 700;
                    line-height: 140%;
                    letter-spacing: 0.2px;
                    text-wrap: balance;
                    transition: color 0.2s;
                }

                .icon {
                    font-size: var(--font-24-20);
                    line-height: 1;
                    color: var(--color-ink-03);
                    transition: transform 0.2s;
                }
            }

            .body {
                max-height: 0;
                padding: 0 var(--space-30-20);
                transition: max-height 0.2s, padding 0.2s;
                overflow: hidden;

                .answer {
                    max-width: 100ch;
                    font-size: var(--font-14-13);
                    font-weight: 300;
                    line-height: 140%;
                    letter-spacing: 0.2px;
                    text-wrap: balance;
                }
            }

            &.opened {
                .head {
                    padding: 22px var(--space-30-20) var(--space-14-10) var(--space-30-20);

                    .icon {
                        transform: rotate(45deg);
                    }
                }

                .body {
                    max-height: 200px;
                    padding: 0 var(--space-30-20) var(--space-28-20) var(--space-30-20);
                }
            }

            &:hover {
                background-color: var(--color-white-08);
            }
        }
    }
}

section.contacts {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: var(--padding-y) var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .header {
        margin-bottom: var(--space-30-20);
        padding: 10px var(--space-30-20);
        align-self: flex-start;
        font-size: var(--font-48-30);
        font-weight: 900;
        line-height: 120%;
        text-wrap: balance;
        background-color: var(--color-accent-01);
    }

    .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);

        .card {
            padding: 30px var(--space-30-20);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            color: var(--color-ink-01);
            text-decoration: none;
            background-color: var(--color-white-02);
            transition: background-color 0.2s;

            .left {
                display: flex;
                align-items: center;
                gap: 20px;

                img {
                    width: 35px;
                    height: 35px;
                }

                .info {
                    .name {
                        margin-bottom: 2px;
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 130%;
                        letter-spacing: 0.2px;
                    }

                    .value {
                        font-size: 14px;
                        font-weight: 300;
                        letter-spacing: 0.2px;
                        color: var(--color-ink-02);
                    }
                }
            }

            .icon {
                margin-top: -3px;
                font-size: var(--font-20-18);
                font-weight: 800;
            }
            
            &:last-child {
                grid-column: span 2;
            }

            &:hover {
                background-color: var(--color-white-08);
            }
        }
    }
}


section.privacy {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: 0 var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .list {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .card {
            padding: 32px var(--space-30-20);
            background-color: var(--color-white-02);
            transition: background-color 0.2s;

            .title {
                margin-bottom: 10px;
                font-size: var(--font-20-18);
                font-weight: 700;
                line-height: 130%;
                text-wrap: balance;
            }

            .text {
                font-size: var(--font-14-13);
                font-weight: 300;
                line-height: 150%;
                letter-spacing: 0.2px;
                text-wrap: balance;
            }
        }
    }
}

section.gallery {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: 0 var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr); 

        .card {
            height: 520px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            color: inherit;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: cover;
            animation: caseCardScroll 10s linear infinite;
            animation-play-state: paused;
            text-decoration: none;
            overflow: hidden;

            .hover {
                padding: 20px var(--space-30-20);
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: var(--color-background-02);
                backdrop-filter: blur(10px);

                .about {
                    text-transform: uppercase;

                    .name {
                        margin-bottom: 3px;
                        font-size: var(--font-16-14);
                        font-weight: 600;
                    }

                    .details {
                        font-size: var(--font-12-10);
                        font-weight: 300;
                    }
                }

                .icon {
                    margin-top: -3px;
                    font-size: var(--font-20-18);
                    font-weight: 800;
                }
            }

            &:hover {
                animation-play-state: running;
            }
        }
    }
}

section.project {
    justify-items: center;

    .container {
        max-width: 1920px;
        width: 100%;
        padding: 0 var(--padding-x);
        display: flex;
        flex-direction: column;
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .preview {
            img {
                width: 100%;
                display: block;
            }
        }

        .description {
            padding: 32px var(--space-30-20);
            background-color: var(--color-white-02);
            transition: background-color 0.2s;

            .title {
                margin-bottom: 10px;
                font-size: var(--font-20-18);
                font-weight: 700;
                line-height: 130%;
                text-wrap: balance;
            }

            .text {
                font-size: var(--font-14-13);
                font-weight: 300;
                line-height: 150%;
                letter-spacing: 0.2px;
                text-wrap: balance;
            }
        }
    }
}


@keyframes caseCardScroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}


@media screen and (max-width: 1440px) {
    section.offers {
        .grid {
            .card {
                padding: 32px var(--space-30-20);

                .top {
                    .title {
                        font-size: 20px;
                    }

                    .description {
                        font-size: 13px;
                    }
                }

                .bottom {
                    gap: 6px;

                    .item {
                        font-size: 13px;
                    }
                }
            }
        }

        &.b {
            .grid {
                .card {
                    &:nth-child(1) {
                        grid-column: span 6;
                    }

                    &:nth-child(2),
                    &:nth-child(3),
                    &:nth-child(4),
                    &:nth-child(5) {
                        grid-column: span 3;
                    }
                }
            }
        }
    }

    section.services,
    section.process {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    section.cases,
    section.prices {
        .grid {
            grid-template-columns: repeat(3, 1fr);

            .card {
                &:nth-child(2) {
                    display: none;
                }
            }
        }
    }

    section.gallery {
        .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media screen and (max-width: 1280px) {
    section.cases {
        .grid {
            grid-template-columns: repeat(2, 1fr);

            .card {
                &:nth-child(2) {
                    display: flex;
                }
            }
        }
    }

    section.prices {
        .grid {
            grid-template-columns: repeat(2, 1fr);

            .card {
                &:nth-child(2) {
                    display: block;
                }
            }
        }
    }

    section.gallery {
        .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media screen and (max-width: 1080px) {
    header,
    footer {
        .container {
            flex-direction: column;
        }
    }

    main.hero {
        align-content: end;

        .container {
            padding-bottom: 128px;
        }
    }

    section.gallery {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media screen and (max-width: 820px) {
    .cookie {
        .text {
            br {
                display: none;
            }
        }
    }

    section.offers,
    section.offers.b {
        .grid {
            .card {
                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3),
                &:nth-child(4),
                &:nth-child(5) {
                    grid-column: span 6;
                }
            }
        }
    }

    section.services,
    section.cases,
    section.process,
    section.prices {
        .grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

@media screen and (max-width: 720px) {
    .cookie {
        .container {
            flex-direction: column;
            align-items: start;
            gap: 20px;
        }

        .text {
            text-wrap: balance;
        }
    }

    section.contacts,
    section.gallery {
        .grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    section.contacts {
        .grid {
            .card {
                &:last-child {
                    grid-column: span 1;
                }
            }
        }
    }
}

@media screen and (max-width: 500px) {
    .cookie {
        .buttons {
            width: 100%;

            button {
                flex: 1;

                &.confirm {
                    padding: var(--space-16-14) 20px;
                }
            }
        }
    }

    main.hero {
        .container {
            padding-bottom: 48px;
        }

        .content {
            .top {
                .title {
                    line-height: 115%;

                    br {
                        display: none;
                    }
                }
            }

            .cta {
                flex-direction: column;

                .button {
                    justify-content: start;
                }
            }
        }

        .gradient {
            background: linear-gradient(to top, var(--color-background-01) 200px, rgba(10, 10, 10, 0.85) 360px, rgba(10, 10, 10, 0) 640px);
        }
    }

    section.offers,
    section.cases,
    section.prices,
    section.faq,
    section.contacts {
        .header {
            width: 100%;
        }
    }

    section.cases {
        .grid {
            .card {
                height: 420px;
            }
        }
    }
}