@import url('https://fonts.googleapis.com/css2family=Montserrat:wght@400;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    background-color: rgb(39, 38, 38);
}

/* =========================
   MEDIA QUERIES - MAIN
========================= */

/* Mobile: telas até 600px */


/* Tablets: telas entre 601px e 900px */
@media (min-width: 601px) and (max-width: 900px) {
    body, html {
        font-size: 15px;
    }

    main {
        padding: 15px;
    }

    main > section {
        width: 100%; /* dois cards lado a lado, com espaço */
    }
}

/* Desktop: telas maiores que 900px */
@media (min-width: 901px) {
    body, html {
        font-size: 16px;
    }

    main {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    main > section {
        width: 50%; /* três cards lado a lado */
        
    }
}