/* Banner */

.banner {
    display: grid;
    gap: 1rem;
}

.banner img:nth-child(1) {
    grid-column: 1/3;
}

.banner img:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3;
}

.banner img:nth-child(3) {
    grid-column: 1/2;
    grid-row: 3/4;
}

.banner img:nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/4;
}

/* Eventos */

.eventos__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto repeat(2, 1fr) auto;
    grid-template-areas: 
        "imagem imagem"
        "nome nome"
        "data data"
        "local botao";
}

.eventos__item img {
    grid-area: imagem;
}

.eventos__item h3 {
    grid-area: nome;
    align-self: center;
}

.eventos__item h4 {
    grid-area: data;
}

.eventos__item h5 {
    grid-area: local;
    align-self: end;
}

.eventos__item button {
    grid-area: botao;
}

/* Agenda */

.agenda__item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
}

.agenda__item img {
    grid-column: 1/3;
}

/* Media  */

@media (min-width: 720px) {

    /* Banner */

    .banner {
        grid-template-columns: calc(50% - 0.75rem);
        column-gap: 1.5rem;
    }

    .banner img:nth-child(1) {
        grid-column: 1/2;
        grid-row: 1/3;
    }

    .banner img:nth-child(2) {
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .banner img:nth-child(3) {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    .banner img:nth-child(4) {
        grid-column: 3/4;
        grid-row: 1/3;
    }
 
}

@media (min-width: 1440px) {

    /* Categorias */

    .categorias {
        display: grid;
        row-gap: 1rem;
        column-gap: 1.5rem;
        grid-template-columns: calc(50% - 0.75rem);
        grid-template-rows: auto 1fr auto;
        grid-template-areas: 
            "titulo titulo"
            "lista destaques"
            "lista imagem";
    }

    .categorias__titulo {
        grid-area: titulo;
    }

    .categorias__lista {
        grid-area: lista;
    }

    .categorias__destaques {
        grid-area: destaques;
    }

    .categorias__imagem {
        grid-area: imagem;
    }

}