:root {
    --gap: 2rem;
}

@media screen and (max-width: 768px) {
    :root {
        --gap: 1rem;
    }
}

.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);
}

.one-third {
    grid-column-start: 3;
    grid-column-end: 4;
}

.two-third {
    grid-column-start: 1;
    grid-column-end: 3;
}

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

.row-5 {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(5, 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));
        gap: 2em;
    }

    .one-third {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .two-third {
        grid-column-start: 1;
        grid-column-end: 4;
    }
}

@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));
    }
}


.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    clear: both;
}

.column-2 > div,
.column-2 article {
    width: calc((100% - (1 * var(--gap))) / 2)
}

.column-3 > div,
.column-3 article {
    width: calc((100% - (2 * var(--gap))) / 3)
}

.column-4 > div,
.column-4 article {
    width: calc((100% - (3 * var(--gap))) / 4)
}

.column-5 > div,
.column-5 article {
    width: calc((100% - (4 * var(--gap))) / 5)
}

.column-6 > div,
.column-6 article {
    width: calc((100% - (5 * var(--gap))) / 6)
}

.column-7 > div,
.column-7 article {
    width: calc((100% - (6 * var(--gap))) / 7)
}

.column-8 > div,
.column-8 article {
    width: calc((100% - (7 * var(--gap))) / 8)
}

.column-9 > div,
.column-9 article {
    width: calc((100% - (8 * var(--gap))) / 9)
}

@media screen and (min-width: 768px) and (max-width:1024px) {

    .column-4 > div,
    .column-4 article,
    .column-5 > div,
    .column-5 article,
    .column-6 > div,
    .column-6 article {
        width: calc((100% - (2 * var(--gap))) / 3)
    }

    .column-7 > div,
    .column-7 article,
    .column-8 > div,
    .column-8 article,
    .column-9 > div,
    .column-9 article {
        width: calc((100% - (3 * var(--gap))) / 4)
    }
}

@media screen and (min-width: 480px) and (max-width:767px) {

    .column-3 > div,
    .column-3 article,
    .column-4 > div,
    .column-4 article,
    .column-5 > div,
    .column-5 article {
        width: calc((100% - (1 * var(--gap))) / 2)
    }

    .column-6 > div,
    .column-6 article,
    .column-7 > div,
    .column-7 article {
        width: calc((100% - (2 * var(--gap))) / 3)
    }

    .column-8 > div,
    .column-8 article,
    .column-9 > div,
    .column-9 article {
        width: calc((100% - (3 * var(--gap))) / 4)
    }

}

@media screen and (max-width: 479px) {

    .column-2 > div,
    .column-2 article,
    .column-3 > div,
    .column-3 article {
        width: 100%
    }

    .column-4 > div,
    .column-4 article,
    .column-5 > div,
    .column-5 article,
    .column-6 > div,
    .column-6 article {
        width: calc((100% - (1 * var(--gap))) / 2)
    }

    .column-7 > div,
    .column-7 article,
    .column-8 > div,
    .column-8 article,
    .column-9 > div,
    .column-9 article {
        width: calc((100% - (2 * var(--gap))) / 3)
    }

}