/* --- Flex Column --- */
.flex-row{
    display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
    align-items: end;
    width: 100%;
}
.space-between{
    justify-content: space-between;
}

.flex-full {
    flex: 1;
}
.flex-none {
    flex: none;
}
.gap-20{
    column-gap: 20px;
}
.gap-30{
    column-gap: 30px;
}

.flex-col-1  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 1); } 
.flex-col-2  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 2 + 10px); }
.flex-col-3  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 3 + 20px); }
.flex-col-4  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 4 + 30px); }
.flex-col-5  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 5 + 40px); }
.flex-col-6  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 6 + 50px); }
.flex-col-7  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 7 + 60px); }
.flex-col-8  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 8 + 70px); }
.flex-col-9  { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 9 + 80px); }
.flex-col-10 { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 10 + 90px); }
.flex-col-11 { flex: 0 0 calc((100% - (11 * 10px)) / 12 * 11 + 100px); }
.flex-col-12 { flex: 0 0 100%; }

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

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