@media (min-width:1279px) {}

@media (max-width:1279px) {
    section.banner {
        background-image: url('./media/bg/main-tablet.svg');
        background-size: 153%;
        background-position: right 40% center;
    }
    section.banner h1 {
        font-size: 10rem;
    }
}

@media (max-width:768px) {
    :root {
        --header-height: 60px;
        --logo-height: 30px;
    }
    header nav.desktop-menu {
        display: none;
    }
    header nav.mobile-menu {
        display: inline;
    }
    section.banner h1 {
        font-size: 6rem;
    }
    footer .links {
        width: 100%;
        margin: 2rem auto;
        flex-direction: column;
    }
    footer .company, footer .communities, footer .useful-links {
        margin-top: 2rem;
    }
    footer .extras span {
        margin-top: 2rem;
    }
}

@media (max-width:480px) {
    :root {
        --header-height: 50px;
        --logo-height: 25px;
    }
    section.banner {
        background-image: url('./media/bg/main-mobile.svg');
        background-size: 195%;
        background-position: center top 50%;
    }
    section.banner h1 {
        font-size: 5rem;
    }
}