.row-2 {
    display: grid;
    gap: 3em;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

.row-3 {
    display: grid;
    gap: 3em;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(1, 1fr);
}

.row-4 {
    display: grid;
    gap: 3em;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(1, 1fr);
}

.row-6 {
    display: grid;
    gap: 3em;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(1, 1fr);
}

/* .one-half, .one-third, .one-fourth {
    grid-column-start: 1;
    grid-column-end: 13;
} */

@media screen and (max-width: 1100px) {
    .row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media screen and (max-width: 900px) {
    .row-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .row-2 {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }

    .row-2, .row-3, .row-4 {
        gap: 2em;
    }
}

@media screen and (max-width: 768px) {
    .row-2 {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
}

@media screen and (max-width: 580px) {
    .row-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}