@media screen and (min-width: 1920px) {
    body {
        font-size: xx-large;
    }

    .h1 {
        font-size: xxx-large;
    }

    .h2 {
        font-size: xxx-large;
    }

    .button--primary {
        font-size: x-large;
    }

    .header-logo {
        width: 256px;
        height: 256px;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 20px auto;
    }
}

@media (max-width: 960px) {
    .header-content {
        width: 100%;
    }

    .header-phone {
        padding: 0.8rem;
    }
}

@media (max-width: 768px) {
    :root {
        --padding-y: 20px;
        --padding-x: 14px;
        --margin-top-5: 5rem;
    }

    .header {
        position: sticky;
        top: 0;
    }

    .header-logo {
        aspect-ratio: 88/96;
        width: 128px;
        height: 128px;
    }

    .header-phone {
        font-size: medium;
        padding: 0.8rem;
    }

    .social-btn {
        width: 48px;
        height: 48px;
    }

    .footer {
        height: 80px;
    }
}

@media (max-width: 580px) {
    .header-phone {
        font-size: x-small;
        padding: 0.6rem;
    }

    .header-btn {
        font-size: x-small;
        padding: 0.6rem 0.8rem;
    }
}

@media (max-width: 425px) {
    :root {
        --padding-y: 20px;
        --padding-x: 14px;
    }

    .header-logo {
        aspect-ratio: 1;
        width: 128px;
        height: 128px;
    }

    .header-phone {
        font-size: xx-small;
        padding: 0.3rem;
    }

    .header-btn {
        font-size: x-small;
        padding: 0.4rem;
    }

    .used-by-list {
        flex-direction: column;
        align-items: center;
    }

    .why-us-buttons {
        flex-direction: column;
    }

    .why-us-buttons > :first-child {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .social-btn {
        width: 36px;
        height: 36px;
    }

    .footer {
        height: 60px;
    }
}