.grid--full,
.grid--half,
.grid--quarter {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: min-content;
}


/* TABLET */
@media only screen and (min-width: 768px) {
    .grid--full {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid--half,
    .grid--quarter {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .grid--full {
        grid-template-columns: repeat(16, 1fr);
    }

    .grid--half {
        grid-template-columns: repeat(8, 1fr);
    }
}