@media screen and (max-width: 1500px) {

    .header__container{
        width: 85%;
    }
}

@media screen and (max-width: 1300px) {

    .header__container{
        width: 90%;
    }

    .header__brand{
        margin-right: 60px;
    }
}

@media screen and (max-width: 1250px) {


    .header__brand{
        font-size: 1.7rem;
        gap: 10px;
    }

    .nav__link{
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 1120px) {

    .header__container{
        width: 95%;
    }

    .nav__link{
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 1000px) {

    .nav__toggle{
        display: inline-block;
        position: relative;
    }

    .header__nav{
        position: absolute;
        top: 80px;
        right: -290px;
        background-color: var(--color-black-trans);
        transition: right .3s ease-in-out;
    }

    .header__nav.header__nav--black{
        background-color: var(--color-black);
    }

    .header__nav.visible{
        right: 0;
        transition: right .3s ease-in-out;
    }

    .nav__list{
        flex-direction: column;
        align-items: end;
        height: auto;
        padding: 20px 60px 40px 60px;
    }

    .nav__link{
        font-size: 1.7rem;
    }

    .toggle{
        cursor: pointer;
    }

    .toggle__open{
        position: absolute;
        top: 0;
    }

    .toggle__open.hidden,
    .toggle__close.hidden{
        opacity: 0;
        visibility: hidden;
    }
}