.vi-flex-grid {
    width: 100%;
}

.vi-flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.vi-flex-col {
    min-height: 80px;
}

/* 12 Column Ratio System */
.vi-col-1  { flex: 0 0 calc((100% / 12) * 1 - 12px); }
.vi-col-2  { flex: 0 0 calc((100% / 12) * 2 - 12px); }
.vi-col-3  { flex: 0 0 calc((100% / 12) * 3 - 12px); }
.vi-col-4  { flex: 0 0 calc((100% / 12) * 4 - 12px); }
.vi-col-5  { flex: 0 0 calc((100% / 12) * 5 - 12px); }
.vi-col-6  { flex: 0 0 calc((100% / 12) * 6 - 12px); }
.vi-col-7  { flex: 0 0 calc((100% / 12) * 7 - 12px); }
.vi-col-8  { flex: 0 0 calc((100% / 12) * 8 - 12px); }
.vi-col-9  { flex: 0 0 calc((100% / 12) * 9 - 12px); }
.vi-col-10 { flex: 0 0 calc((100% / 12) * 10 - 12px); }
.vi-col-11 { flex: 0 0 calc((100% / 12) * 11 - 12px); }
.vi-col-12 { flex: 0 0 100%; }

/* Responsive: stack below tablet */
@media (max-width: 768px) {
    .vi-flex-row {
        flex-direction: column;
    }

    .vi-flex-col {
        flex: 0 0 100% !important;
    }
}