/* grid12 basic presets */
.grid12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    /* justify-content: center;
    align-content: center;
    align-items: start; */
}

/* column gap presets */
.grid12[data-grid12-column-gap="s"] {
    column-gap: 5px;
}

.grid12[data-grid12-column-gap="m"] {
    column-gap: 10px;
}

.grid12[data-grid12-column-gap="l"] {
    column-gap: 20px;
}

/* row gap presets */
.grid12[data-grid12-row-gap="s"] {
    row-gap: 5px;
}

.grid12[data-grid12-row-gap="m"] {
    row-gap: 10px;
}

.grid12[data-grid12-row-gap="l"] {
    row-gap: 20px;
}

.grid12[data-grid12-row-gap="xxl"] {
    row-gap: 35px;
}

/* grid items presets */
.grid-column[data-grid-column-start="auto"] {
    grid-column-start: auto;
}

.grid-column[data-grid-column-start="1"] {
    grid-column-start: 1;
}

.grid-column[data-grid-column-start="9"] {
    grid-column-start: 9;
}

.grid-column[data-grid-column-start="11"] {
    grid-column-start: 11;
}

.grid-column[data-grid-column-end="span2"] {
    grid-column-end: span 2;
}

.grid-column[data-grid-column-end="span4"] {
    grid-column-end: span 4;
}

.grid-column[data-grid-column-end="span7"] {
    grid-column-end: span 7;
}

.grid-column[data-grid-column-end="span8"] {
    grid-column-end: span 8;
}

.grid-column[data-grid-column-end="span10"] {
    grid-column-end: span 10;
}

.grid-column[data-grid-column-end="span12"] {
    grid-column-end: span 12;
}

.grid-row[data-grid-row-start="auto"] {
    grid-row-start: auto;
}

.grid-row[data-grid-row-start="1"] {
    grid-row-start: 1;
}

.grid-row[data-grid-row-end="span2"] {
    grid-row-end: span 2;
}

.grid-row[data-grid-row-end="span auto"] {
    grid-row-end: span auto;
}