@media screen and (min-width: 320px) {
    section{
        padding: 0 1%;
    }
    .header{
        padding: 0.25rem;

    }
    .header__logo-name{
        font-size: 0.75rem;
    }
    .header__navigation__list.navigation__page{
        display: none;
    }
    .header__navigation__list.navigation__media{
        display: none;
    }
    
    #banner{
        & .media__container{
            width: 100vw;
            height: auto;
            
            & .media__container-item-img{
                width: 100vw;

                & img{
                    width: inherit;
                    height: inherit;
                }
            }
        }
        & .media__container__btns__control-btn{
            display: none;
        }
    }

    #media{
        .media__container{
            flex-direction: column;

            .media__container-item{
                width: 100%;
            }
        }
    }

    #join, #usp{
        .section-container{
            flex-direction: column;

            .section-container__item{
                width: 100%;
            }
        }
    }

    .footer__container.container-bottom{
        flex-direction: column;
        gap: 4rem;
    }
}

@media screen and (max-width: 720px) {
    #footer > div.footer__container.container-bottom > nav{
        width: 100%;
        padding: 0 5%;
    }
}

@media screen and (min-width: 720px) {
    #banner .media__container__btns__control-btn{
        display: flex;
    }
    .header__navigation__list.navigation__page{
        display: flex;
        font-size: 0.75rem;
        
        & .header__navigation__list-item:not(:last-child){
            margin-right: 1rem;
        }
    }
    #media{
        .media__container{
            flex-direction: row;
            
            .media__container-item{
                width: 40%;
            }
        }
    }
}

@media screen and (min-width: 1024px) {
    section{
        padding: 0 5%;
    }
    .header{
        padding: 1rem ;
    }
    .header__navigation__list.navigation__page{
        font-size: 1rem;
        
        & .header__navigation__list-item:not(:last-child){
            margin-right: 2.5rem;
        }
    }
    #join, #usp{
        .section-container{
            flex-direction: row;
            
            .section-container__item{
                width: 40%;
            }
        }
    }
    .footer__container.container-bottom{
        flex-direction: row;
        gap: 0;
    }
}

@media screen and (min-width: 1440px) {
    
    
    .header{
        padding: 1rem 5rem;
    }
    .header__navigation__list.navigation__page{
        font-size: 1.25rem;
    }
    .header__navigation__list.navigation__media{
        display: flex;
    }

    #banner{
        & .media__container{
            width: 1440px;
            height: 500px;
    
            & .media__container-item-img{
                width: 1440px;
            }
        }
    }
}