/* Flex & Grid Utility Classes */

/* Flex */
.flex {
    display: flex;
}

@media (max-width: 767px) {
    .flex {
        flex-direction: column;
    }
}

.flex.row {
    flex-direction: row;
}

.flex.column {
    flex-direction: column;
}

.flex.between,
.grid.between {
    justify-content: space-between;
}

.flex.around,
.grid.around {
    justify-content: space-around;
}

.flex.center,
.grid.center {
    justify-content: center;
}

.flex.start,
.grid.start {
    justify-content: flex-start;
}

.flex.end,
.grid.end {
    justify-content: flex-end;
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex.nowrap {
    flex-wrap: nowrap;
}

.flex.align-center,
.grid.align-center {
    align-items: center;
}

.flex.align-start,
.grid.align-start {
    align-items: flex-start;
}

.flex.align-end,
.grid.align-end {
    align-items: flex-end;
}

.flex.align-stretch,
.grid.align-stretch {
    align-items: stretch;
}

.flex.align-baseline,
.grid.align-baseline {
    align-items: baseline;
}

.flex.heigthFull,
.grid.heigthFull {
    height: 100%;
}

/* Flex gaps */
.flex.gap-2, .grid.gap-2 { gap: var(--spacing-2); }
.flex.gap-4, .grid.gap-4 { gap: var(--spacing-4); }
.flex.gap-6, .grid.gap-6 { gap: var(--spacing-6); }
.flex.gap-8, .grid.gap-8 { gap: var(--spacing-8); }
.flex.gap-10, .grid.gap-10 { gap: var(--spacing-10); }
.flex.gap-12, .grid.gap-12 { gap: var(--spacing-12); }
.flex.gap-14, .grid.gap-14 { gap: var(--spacing-14); }
.flex.gap-15, .grid.gap-15 { gap: var(--spacing-15); }
.flex.gap-16, .grid.gap-16 { gap: var(--spacing-16); }
.flex.gap-18, .grid.gap-18 { gap: var(--spacing-18); }
.flex.gap-20, .grid.gap-20 { gap: var(--spacing-20); }
.flex.gap-22, .grid.gap-22 { gap: var(--spacing-22); }
.flex.gap-24, .grid.gap-24 { gap: var(--spacing-24); }
.flex.gap-25, .grid.gap-25 { gap: var(--spacing-25); }
.flex.gap-28, .grid.gap-28 { gap: var(--spacing-28); }
.flex.gap-30, .grid.gap-30 { gap: var(--spacing-30); }
.flex.gap-32, .grid.gap-32 { gap: var(--spacing-32); }
.flex.gap-36, .grid.gap-36 { gap: var(--spacing-36); }
.flex.gap-38, .grid.gap-38 { gap: var(--spacing-38); }
.flex.gap-40, .grid.gap-40 { gap: var(--spacing-40); }
.flex.gap-42, .grid.gap-42 { gap: var(--spacing-42); }
.flex.gap-44, .grid.gap-44 { gap: var(--spacing-44); }
.flex.gap-46, .grid.gap-46 { gap: var(--spacing-46); }
.flex.gap-48, .grid.gap-48 { gap: var(--spacing-48); }
.flex.gap-50, .grid.gap-50 { gap: var(--spacing-50); }
.flex.gap-52, .grid.gap-52 { gap: var(--spacing-52); }
.flex.gap-54, .grid.gap-54 { gap: var(--spacing-54); }
.flex.gap-56, .grid.gap-56 { gap: var(--spacing-56); }
.flex.gap-58, .grid.gap-58 { gap: var(--spacing-58); }
.flex.gap-60, .grid.gap-60 { gap: var(--spacing-60); }
.flex.gap-62, .grid.gap-62 { gap: var(--spacing-62); }
.flex.gap-64, .grid.gap-64 { gap: var(--spacing-64); }
.flex.gap-66, .grid.gap-66 { gap: var(--spacing-66); }
.flex.gap-68, .grid.gap-68 { gap: var(--spacing-68); }
.flex.gap-70, .grid.gap-70 { gap: var(--spacing-70); }
.flex.gap-72, .grid.gap-72 { gap: var(--spacing-72); }
.flex.gap-74, .grid.gap-74 { gap: var(--spacing-74); }
.flex.gap-76, .grid.gap-76 { gap: var(--spacing-76); }
.flex.gap-78, .grid.gap-78 { gap: var(--spacing-78); }
.flex.gap-80, .grid.gap-80 { gap: var(--spacing-80); }
.flex.gap-82, .grid.gap-82 { gap: var(--spacing-82); }
.flex.gap-84, .grid.gap-84 { gap: var(--spacing-84); }
.flex.gap-86, .grid.gap-86 { gap: var(--spacing-86); }
.flex.gap-88, .grid.gap-88 { gap: var(--spacing-88); }
.flex.gap-90, .grid.gap-90 { gap: var(--spacing-90); }
.flex.gap-92, .grid.gap-92 { gap: var(--spacing-92); }
.flex.gap-94, .grid.gap-94 { gap: var(--spacing-94); }
.flex.gap-96, .grid.gap-96 { gap: var(--spacing-96); }
.flex.gap-98, .grid.gap-98 { gap: var(--spacing-98); }
.flex.gap-100, .grid.gap-100 { gap: var(--spacing-100); }

.flex.row-gap-2, .grid.row-gap-2 { row-gap: var(--spacing-2); }
.flex.row-gap-4, .grid.row-gap-4 { row-gap: var(--spacing-4); }
.flex.row-gap-6, .grid.row-gap-6 { row-gap: var(--spacing-6); }
.flex.row-gap-8, .grid.row-gap-8 { row-gap: var(--spacing-8); }
.flex.row-gap-10, .grid.row-gap-10 { row-gap: var(--spacing-10); }
.flex.row-gap-12, .grid.row-gap-12 { row-gap: var(--spacing-12); }
.flex.row-gap-14, .grid.row-gap-14 { row-gap: var(--spacing-14); }
.flex.row-gap-15, .grid.row-gap-15 { row-gap: var(--spacing-15); }
.flex.row-gap-16, .grid.row-gap-16 { row-gap: var(--spacing-16); }
.flex.row-gap-18, .grid.row-gap-18 { row-gap: var(--spacing-18); }
.flex.row-gap-20, .grid.row-gap-20 { row-gap: var(--spacing-20); }
.flex.row-gap-22, .grid.row-gap-22 { row-gap: var(--spacing-22); }
.flex.row-gap-24, .grid.row-gap-24 { row-gap: var(--spacing-24); }
.flex.row-gap-25, .grid.row-gap-25 { row-gap: var(--spacing-25); }
.flex.row-gap-28, .grid.row-gap-28 { row-gap: var(--spacing-28); }
.flex.row-gap-30, .grid.row-gap-30 { row-gap: var(--spacing-30); }
.flex.row-gap-32, .grid.row-gap-32 { row-gap: var(--spacing-32); }
.flex.row-gap-36, .grid.row-gap-36 { row-gap: var(--spacing-36); }
.flex.row-gap-38, .grid.row-gap-38 { row-gap: var(--spacing-38); }
.flex.row-gap-40, .grid.row-gap-40 { row-gap: var(--spacing-40); }
.flex.row-gap-42, .grid.row-gap-42 { row-gap: var(--spacing-42); }
.flex.row-gap-44, .grid.row-gap-44 { row-gap: var(--spacing-44); }
.flex.row-gap-46, .grid.row-gap-46 { row-gap: var(--spacing-46); }
.flex.row-gap-48, .grid.row-gap-48 { row-gap: var(--spacing-48); }
.flex.row-gap-50, .grid.row-gap-50 { row-gap: var(--spacing-50); }
.flex.row-gap-52, .grid.row-gap-52 { row-gap: var(--spacing-52); }
.flex.row-gap-54, .grid.row-gap-54 { row-gap: var(--spacing-54); }
.flex.row-gap-56, .grid.row-gap-56 { row-gap: var(--spacing-56); }
.flex.row-gap-58, .grid.row-gap-58 { row-gap: var(--spacing-58); }
.flex.row-gap-60, .grid.row-gap-60 { row-gap: var(--spacing-60); }
.flex.row-gap-62, .grid.row-gap-62 { row-gap: var(--spacing-62); }
.flex.row-gap-64, .grid.row-gap-64 { row-gap: var(--spacing-64); }
.flex.row-gap-66, .grid.row-gap-66 { row-gap: var(--spacing-66); }
.flex.row-gap-68, .grid.row-gap-68 { row-gap: var(--spacing-68); }
.flex.row-gap-70, .grid.row-gap-70 { row-gap: var(--spacing-70); }
.flex.row-gap-72, .grid.row-gap-72 { row-gap: var(--spacing-72); }
.flex.row-gap-74, .grid.row-gap-74 { row-gap: var(--spacing-74); }
.flex.row-gap-76, .grid.row-gap-76 { row-gap: var(--spacing-76); }
.flex.row-gap-78, .grid.row-gap-78 { row-gap: var(--spacing-78); }
.flex.row-gap-80, .grid.row-gap-80 { row-gap: var(--spacing-80); }
.flex.row-gap-82, .grid.row-gap-82 { row-gap: var(--spacing-82); }
.flex.row-gap-84, .grid.row-gap-84 { row-gap: var(--spacing-84); }
.flex.row-gap-86, .grid.row-gap-86 { row-gap: var(--spacing-86); }
.flex.row-gap-88, .grid.row-gap-88 { row-gap: var(--spacing-88); }
.flex.row-gap-90, .grid.row-gap-90 { row-gap: var(--spacing-90); }
.flex.row-gap-92, .grid.row-gap-92 { row-gap: var(--spacing-92); }
.flex.row-gap-94, .grid.row-gap-94 { row-gap: var(--spacing-94); }
.flex.row-gap-96, .grid.row-gap-96 { row-gap: var(--spacing-96); }
.flex.row-gap-98, .grid.row-gap-98 { row-gap: var(--spacing-98); }
.flex.row-gap-100, .grid.row-gap-100 { row-gap: var(--spacing-100); }

/* Grid */
.grid {
    display: grid;
}

.grid.heightFull,
.flex.heightFull {
    height: 100%;
}

/* Mobile Grid */
@media (max-width: 767px) {
    .grid.col-mob-2 { grid-template-columns: repeat(2, 1fr); }
    .grid.col-mob-3 { grid-template-columns: repeat(2, 1fr); }
    .grid.col-mob-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.col-mob-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet Grid */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid.col-pl-2 { grid-template-columns: repeat(2, 1fr); }
    .grid.col-pl-3 { grid-template-columns: repeat(3, 1fr); }
    .grid.col-pl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid.col-pl-5 { grid-template-columns: repeat(5, 1fr); }
    .grid.col-pl-6 { grid-template-columns: repeat(6, 1fr); }

    .grid.col-pl-20-80 { grid-template-columns: 20% auto; }
    .grid.col-pl-30-70 { grid-template-columns: 30% auto; }
    .grid.col-pl-40-60 { grid-template-columns: 40% auto; }
    .grid.col-pl-45-55 { grid-template-columns: 45% auto; }
    .grid.col-pl-55-45 { grid-template-columns: 55% auto; }
    .grid.col-pl-60-40 { grid-template-columns: 60% auto; }
    .grid.col-pl-70-30 { grid-template-columns: 70% auto; }
    .grid.col-pl-80-20 { grid-template-columns: 80% auto; }
}

/* Laptop Grid */
@media (min-width: 1024px) {
    .grid.col-2 { grid-template-columns: repeat(2, 1fr); }
    .grid.col-3 { grid-template-columns: repeat(3, 1fr); }
    .grid.col-4 { grid-template-columns: repeat(4, 1fr); }
    .grid.col-5 { grid-template-columns: repeat(5, 1fr); }
    .grid.col-6 { grid-template-columns: repeat(6, 1fr); }

    .grid.col-20-80 { grid-template-columns: 20% auto; }
    .grid.col-30-70 { grid-template-columns: 30% auto; }
    .grid.col-40-60 { grid-template-columns: 40% auto; }
    .grid.col-45-55 { grid-template-columns: 45% auto; }
    .grid.col-55-45 { grid-template-columns: 55% auto; }
    .grid.col-60-40 { grid-template-columns: 60% auto; }
    .grid.col-70-30 { grid-template-columns: 70% auto; }
    .grid.col-80-20 { grid-template-columns: 80% auto; }
}