/* rem and em do NOT depend on html font-size in media queries!
Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1312px */
/**************************/


@media (max-width: 82em) {}

/* 1136px */
/*
@media (max-width: 71em) {

} */

@media (max-width: 71em) {
    .hero-side {
        grid-template-columns: 2fr 1fr;
    }

    .componentes-cards {
        gap: 1.4rem;
    }

    .produto-card {
        padding: 1.2rem 1rem 2.4rem;
    }
}

/**************************/
/* BELOW 1024px */
/**************************/

@media (max-width: 64em) {
    html {
        /* 9px / 16px = 56.25 */
        font-size: 56.25%;
    }
}

/**************************/
/* BELOW 940px (Tablets) */
/**************************/

@media (max-width: 59em) {
    html {
        font-size: 50%;
    }

    .curso-turmas-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem;
    }
}

/**************************/
/* BELOW 768px */
/**************************/

@media (max-width: 48em) {
    .hero-side {
        grid-template-columns: 3fr 1fr;
    }

    .solucao-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cursos-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .membros-equipa-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-ce-cta {
        grid-template-columns: 1fr auto;
        gap: 6.4rem;
    }

    .corpo-rodape {
        grid-template-columns: 1fr;
    }

    .rodape-logo-img {
        width: 40%;
        margin-bottom: 4.8rem;
    }

    .rodape-outros-links {
        grid-row: 1;
    }

    .wandi-imagens {
        gap: 2.4rem;
    }

    .wandi-aplicacoes {
        padding: 6.4rem 3.6rem;
    }

    .wa-aplicacoes {
        gap: 2.4rem;
    }

    .secao-loja-robotica {
        grid-template-columns: 1fr 3fr;
    }

    .componentes-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
    }

    .produto-titulo {
        font-size: 1.4rem;
    }

    .produto-preco {
        font-size: 1.8rem;
    }

    .cursos-cards-in {
        grid-template-columns: repeat(2, 1fr);
    }

    .curso-card:nth-child(1) {
        grid-column: 1 / 2;
    }

    .curso-card:nth-child(2) {
        grid-column: 2 / 3;
    }

    .curso-section-corpo {
        gap: 6.4rem;
        grid-template-columns: 1fr;
    }
}


/**************************/
/* BELOW 544 (Phones) */
/**************************/

@media (max-width: 34em) {
    .hero-side {
        grid-template-columns: 1fr;
    }

    .solucao-cards {
        grid-template-columns: 1fr;
    }

    .areas-aplicacao-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cursos-cards {
        grid-template-columns: 1fr;
    }

    .curso-card h3 {
        height: 8rem;
    }

    .servicos-info {
        grid-template-columns: 1fr;
    }

    .quem-somos-container {
        grid-template-columns: 1fr;
    }

    .membros-equipa-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .detalhes-membro {
        bottom: -20%;
    }

    .missao-visao-valores {
        grid-template-columns: 1fr;
    }

    .section-ce-cta {
        text-align: center;
        grid-template-columns: 1fr;
        gap: 6.4rem;
    }

    .rodape-outros-links {
        grid-template-columns: 1fr 1fr;
        gap: 6.4rem;
    }

    .card-map {
        grid-column: 1 / -1;
    }

    .wandi-imagens {
        grid-template-columns: repeat(2, 1fr);
    }

    .secao-loja-robotica {
        grid-template-columns: 1fr 2fr;
    }

    .componentes-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem;
    }

    .produto-titulo {
        font-size: 1.4rem;
    }

    .produto-preco {
        font-size: 1.8rem;
    }

    .cursos-cards-in {
        grid-template-columns: 1fr;
    }

    .curso-card:nth-child(1) {
        grid-column: 1;
    }

    .curso-card:nth-child(2) {
        grid-column: 1;
    }
}


/**************************/
/* BELOW 480 (Phones) */
/**************************/

@media (max-width: 30em) {
    body {
        padding: 0;
    }

    .menu-nav {
        height: 8rem;
        /* position: relative; */
    }

    .altura-menu {
        height: 8rem;
        /* display: none; */
    }

    .membros-equipa-cards {
        grid-template-columns: 1fr;
    }

    .detalhes-membro {
        bottom: -10%;
    }

    .wandi-aplicacoes {
        padding: 6.4rem 2.4rem;
    }

    .wa-aplicacoes {
        gap: 1.6rem;
    }

    .secao-loja-robotica {
        grid-template-columns: 1fr;
    }

    .curso-turmas-cards {
        grid-template-columns: 1fr;
    }
}