.grid {
    display: grid;
    gap: 3rem;
    position: relative;
    grid-auto-flow: row dense;
}

[data-grid-cols="0"],
[data-grid-cols="1"],
[data-grid-cols="2"],
[data-grid-cols="3"],
[data-grid-cols="4"],
[data-grid-cols="5"],
[data-grid-cols="6"],
[data-grid-cols="7"],
[data-grid-cols="8"],
[data-grid-cols="9"],
[data-grid-cols="10"],
[data-grid-cols="11"],
[data-grid-cols="12"] {
    grid-template-columns: repeat(0, 1fr);
}



@media (min-width: 992px) {
    [data-grid-cols="0"] {
        grid-template-columns: repeat(0, 1fr);
    }

    [data-grid-cols="1"] {
        grid-template-columns: repeat(1, 1fr);
    }

    [data-grid-cols="2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-grid-cols="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    [data-grid-cols="4"] {
        grid-template-columns: repeat(4, 1fr);
    }

    [data-grid-cols="5"] {
        grid-template-columns: repeat(5, 1fr);
    }

    [data-grid-cols="6"] {
        grid-template-columns: repeat(6, 1fr);
    }

    [data-grid-cols="7"] {
        grid-template-columns: repeat(7, 1fr);
    }

    [data-grid-cols="8"] {
        grid-template-columns: repeat(8, 1fr);
    }

    [data-grid-cols="9"] {
        grid-template-columns: repeat(9, 1fr);
    }

    [data-grid-cols="10"] {
        grid-template-columns: repeat(10, 1fr);
    }

    [data-grid-cols="11"] {
        grid-template-columns: repeat(11, 1fr);
    }

    [data-grid-cols="12"] {
        grid-template-columns: repeat(12, 1fr);
    }
}