.home {
    display: grid;
    grid-template-columns: 1fr 0.3fr;
    grid-template-areas: "reservas reservas-graph" "recogidas recogidas-graph";
    gap: 60px;
    .graph {
        background: white;
        text-align: center;
    }
    @include breakpoint(xlg) {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "reservas reservas" "recogidas recogidas" "reservas-graph recogidas-graph";
        gap: 40px;
    }
    @include breakpoint (s) {
        grid-template-areas: "reservas reservas" "recogidas recogidas" "reservas-graph reservas-graph" "recogidas-graph recogidas-graph";
    }
    &__section {
        &:nth-child(1) {
            grid-area: reservas;
            @include breakpoint(xlg) {
                grid-column: 1/3;
            }
        }
        &:nth-child(2) {
            grid-area: reservas-graph;
        }
        &:nth-child(3) {
            grid-area: recogidas;
            @include breakpoint(xlg) {
                grid-column: 1/3;
            }
        }
        &:nth-child(4) {
            grid-area: recogidas-graph;
        }
        &--no-header {
            margin-top: 60px;
            @include breakpoint(s) {
                margin-top: 0;
            }
        }
    }
}