﻿.v2.grid {
    display: grid;
    --v2-grid-column-1-size: max-content;
    --v2-grid-column-2-size: max-content;
    --v2-grid-column-3-size: max-content;
    --v2-grid-column-4-size: max-content;
    --v2-grid-column-5-size: max-content;
}

.v2.grid.fill {
    --v2-grid-column-1-size: auto;
    --v2-grid-column-2-size: auto;
    --v2-grid-column-3-size: auto;
    --v2-grid-column-4-size: auto;
    --v2-grid-column-5-size: auto;
}

.v2.grid.al-start {
    align-items: flex-start;
}

.v2.grid.al-center {
    align-items: center;
}

.v2.grid.al-end {
    align-items: flex-end;
}

.v2.grid.ju-start {
    justify-items: flex-start;
}

.v2.grid.ju-center {
    justify-items: center;
}

.v2.grid.ju-end {
    justify-items: flex-end;
}

.v2.grid.gap {
    grid-gap: 8px;
}

.v2.grid.gap-small {
    grid-gap: 4px;
}

.v2.grid.gap-big {
    grid-gap: 12px;
}

.v2.grid.columns-2 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size);
}

.v2.grid.columns-3 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size) [col-3] var(--v2-grid-column-3-size);
}

.v2.grid.columns-4 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size) [col-3] var(--v2-grid-column-3-size) [col-4] var(--v2-grid-column-4-size);
}

.v2.grid.columns-5 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size) [col-3] var(--v2-grid-column-3-size) [col-4] var(--v2-grid-column-4-size) [col-5] var(--v2-grid-column-5-size);
}

.v2.grid > .col-1 {
    grid-column: col-1;
}

.v2.grid > .col-2 {
    grid-column: col-2;
}

.v2.grid > .col-3 {
    grid-column: col-3;
}

.v2.grid > .col-4 {
    grid-column: col-4;
}

.v2.grid > .col-5 {
    grid-column: col-5;
}

.v2.grid.col-1-fill {
    --v2-grid-column-1-size: auto !important;
}

.v2.grid.col-2-fill {
    --v2-grid-column-2-size: auto !important;
}

.v2.grid.col-3-fill {
    --v2-grid-column-3-size: auto !important;
}

.v2.grid.col-4-fill {
    --v2-grid-column-4-size: auto !important;
}

.v2.grid.col-5-fill {
    --v2-grid-column-5-size: auto !important;
}