h4 {
    margin-top: 5%;
    margin-bottom: 0%;
}

p {
    margin-top: 1%;
    margin-bottom: 0%;
}

main {
    margin: 0;
    margin-top: 4%;
}

main > section {
    margin-left: 5%;
    margin-right: 5%;
}

main > section:last-child {
    margin-bottom: 5%;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(300px, 1fr));
    grid-auto-rows: 0.5fr;
    gap: 3%;
    margin-top: 2%;
    row-gap: 5%;
}

.grid-names {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, minmax(300px, 1fr));
}

#names_palermos {
    grid-template-rows: repeat(21, auto);
}

#names_escutante {
    grid-template-rows: repeat(5, auto);
}

#names_apocalipse {
    grid-template-rows: repeat(10, auto);
}

.hours_event {
    display: grid; 
    grid-template-columns: 1fr 3fr;
    margin-bottom: 8%;
    column-gap: 5%;
}

@media(max-width: 1400px) {
    .playground, .horario {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 5%;
    }

    .hours_event {
        margin-bottom: 5%;
    }

    #names_palermos {
        grid-template-rows: repeat(28, auto);
    }

    .horario {
        margin-bottom: 5%;
    }
}

@media(max-width: 1200px) {
    .horario {
        margin-bottom: 10%;
    }
}

@media(max-width: 1000px) {
    .grid-names {
        grid-template-rows: repeat(10, auto);
    }

    #names_palermos {
        grid-template-rows: repeat(43, auto);
    }

    #names_escutante {
        grid-template-rows: repeat(7, auto);
    }

    #names_apocalipse {
        grid-template-rows: repeat(15, auto);
    }
}

@media(max-width: 800px) {
    h4 {
        margin-top: 8%;
        margin-bottom: 4%;
    }

    .grid {
        display: block;
    }

    .grid-names {
        display: block;
    }

    .hours_event {
        grid-template-columns: 0.5fr 3fr;
        column-gap: 3%;
    }
}