@font-face {
    font-family: 'Icones';
    src: url(../font/icones.ttf);
}

body{
    background-color: #1D232A;
    font-family: 'Open Sans', 'Icones', sans-serif;
    color: #FFFFFF; 
    display: grid;
}

.principal{
    display: grid;
    padding: 24px;
    gap: 16px;
    grid-template-areas: 
            "titulo-pagina"
            "destaque-video"
            "secao-videos"
            "produtos-recentes"
            "secao-produtos"
        ;
}

.titulo-pagina{
    font-size:1.5rem;
    font-weight: 700;
    grid-area: titulo-pagina;
}

@media screen and (min-width: 1024px){
    body{
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .principal{
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 
            "titulo-pagina titulo-pagina titulo-pagina"
            "destaque-video destaque-video videos-recentes"
            "secao-videos secao-videos secao-videos"
            "destaque-produtos produtos-recentes produtos-recentes "
            "secao-produtos secao-produtos secao-produtos"
        ;
        column-gap: 32px;
        grid-column: 2;
        grid-row: 2;
    }
}