/* HEADER */
@media (max-width: 768px){
    .header__logo{
        width: 30px;    
        height: 44px;
    }

    .header__container{
        border-radius: 1.875rem;
        margin-top: 1.875rem;
    }

    .header__nav{
        flex-wrap: wrap;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .header__list{
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        order: 1;
    }

    .header__list-link{
        font-size: 1.125rem;
    }

    .header__button{
        font-size: 1.125rem;

        padding: 0.875rem 1.5rem;
    }

}


/* HERO */
@media (max-width: 768px){

    .hero__text{
        margin-top: 100px;

        padding-inline: 20px;
    }

    .hero__title{
        font-size: 42px;
    }

    .hero__desc{
        font-size: 18px;
    }

    .hero__buttons{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 50px;
        padding-inline: 20px;
    }

    .hero__button{
        width: 100%;
        max-width: 280px;

        justify-content: center;
    }

    .hero__stats{
        grid-template-columns: 1fr;

        gap: 40px;

        margin-top: 120px;

        padding-inline: 20px;
    }

    .hero__card{
        padding: 40px 30px;
    }

    .hero__value{
        font-size: 28px;
    }

    .hero__unit{
        font-size: 18px;
    }

    .hero__label{
        font-size: 24px;
    }

    .hero__icon{
        transform: scale(0.8);

        right: -28px;
        top: -24px;
    }

    .hero__slogan{
        margin: 150px auto;
    }

    .hero__slogan-title{
        font-size: 42px;
        margin-bottom: 100px;
    }

    .hero__steps{
        flex-direction: column;
        align-items: center;
        gap: 100px;
    }

    .hero__line{
        display: none;
    }

    .hero__circle{
        width: 110px;
        height: 110px;
    }

    .hero__step-text{
        white-space: normal;
        text-align: center;
        font-size: 18px;
        margin-top: 70px;
    }

}


/* DOWNLOADER */
@media (max-width: 768px){
    .downloader{
        gap: 145px;
    }

    .downloader__item{
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .downloader__item:last-of-type{
        flex-direction: column;
    }

    .downloader__title,
    .downloader__rarity-title{
        font-size: 42px;
        text-align: center;
    }

    .downloader__desc{
        font-size: 18px;
        text-align: center;
    }

    .downloader__text {
        text-align: center;
    }

    .downloader__launch{
        font-size: 18px;
    }

    .downloader__item--reverse .downloader__title{
        text-align: center;
    }
    

    .downloader__card{
        width: 100%;
        max-width: 357px;
    }

    
    .downloader__header{
        width: 100%;
    }

    .downloader__value{
        font-size: 24px;
    }

    .downloader__label{
        font-size: 16px;
    }

    .downloader__actions{
        flex-direction: column;
        gap: 20px;
    }
    
    .downloader__button{
        width: 100%;
        justify-content: center;
    }

    .downloader__table-wrapper{
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .downloader__table{
        min-width: 700px;
    }

    .downloader__table th{
        font-size: 20px;
    }

    .downloader__table td{
        font-size: 18px;
    }

    .downloader__rarity-circle{
        width: 115px;
        height: 115px;
    }

}


/* PARTNERS / TEAM / FAQ */
@media (max-width: 768px){

    .partners{
        padding: 120px 20px;
    }

    .partners__column{
        flex-wrap: wrap;

        justify-content: center;

        gap: 20px;
    }

    .partners__item{
        width: 120px;
        height: 120px;
    }

    .team__list{
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding-inline: 20px;
    }

    .team__title{
        font-size: 42px;
        text-align: center;
    }

    .team__photo{
        width: 320px;
        height: 320px;
    }

    .team__name{
        font-size: 28px;
    }

    .team__role{
        font-size: 20px;
    }

    .faq{
        margin-top: 120px;
        margin-bottom: 120px;

        padding-inline: 20px;
    }

    .faq__title{
        font-size: 42px;

        text-align: center;
    }

    .faq__question{
        padding: 25px;
        gap: 12px;
    }   

    .faq__question span{
        font-size: 20px;
    }

    .faq__answer{
        padding: 0 25px 25px;

        font-size: 18px;
    }

    .faq__icon{
        width: 24px;
        height: 18px;
    }

}