/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px){
    .container{
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* For medium devices */
@media screen and (min-width: 767px){
    .show-menu{
        transform: translate(40%)
    }
}

/* For large devices */
@media screen and (min-width: 1024px){
    .container{
        margin-left: auto;
        margin-right: auto;
    }

    .section{
        padding: 7rem 0 2rem;
    }

    .header__nav{
        height: calc(var(--header-height) + 1.5rem);
    }

    .nav{
        &__shape{
            width: 350px;
            height: 350px;
        }
        &__mask{
            width: 100px;
            height: 100px;
            border-radius: 2rem;
            margin-bottom: 2rem;
        }
        &__img{
            width: 90px;
        }
        &__link{
            font-size: var(--normal-font-size);

            & i{
                font-size: 1.25rem;
            }
        }
    }
}