/* 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.justify-between,
.grid.justify-between {
    justify-content: space-between;
}

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

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

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

.flex.justify-end,
.grid.justify-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.full-height,
.grid.full-height {
    height: 100%;
}
/* Flex gaps */
.flex.gap-4, .grid.gap-4 { gap: var(--spacing-4); }
.flex.gap-8, .grid.gap-8 { gap: var(--spacing-8); }
.flex.gap-12, .grid.gap-12 { gap: var(--spacing-12); }
.flex.gap-16, .grid.gap-16 { gap: var(--spacing-16); }
.flex.gap-20, .grid.gap-20 { gap: var(--spacing-20); }
.flex.gap-24, .grid.gap-24 { gap: var(--spacing-24); }
.flex.gap-28, .grid.gap-28 { gap: var(--spacing-28); }
.flex.gap-32, .grid.gap-32 { gap: var(--spacing-32); }
.flex.gap-36, .grid.gap-36 { gap: var(--spacing-36); }
.flex.gap-40, .grid.gap-40 { gap: var(--spacing-40); }
.flex.gap-44, .grid.gap-44 { gap: var(--spacing-44); }
.flex.gap-48, .grid.gap-48 { gap: var(--spacing-48); }
.flex.gap-52, .grid.gap-52 { gap: var(--spacing-52); }
.flex.gap-56, .grid.gap-56 { gap: var(--spacing-56); }
.flex.gap-60, .grid.gap-60 { gap: var(--spacing-60); }
.flex.gap-64, .grid.gap-64 { gap: var(--spacing-64); }
.flex.gap-68, .grid.gap-68 { gap: var(--spacing-68); }
.flex.gap-72, .grid.gap-72 { gap: var(--spacing-72); }
.flex.gap-76, .grid.gap-76 { gap: var(--spacing-76); }
.flex.gap-80, .grid.gap-80 { gap: var(--spacing-80); }

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

/* 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; }
}