/* Layout Grid System */
.e-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--s-4) * -1);
    margin-right: calc(var(--s-4) * -1);
}

/* Alignment */
.e-grid.align-center {
    align-items: center;
}

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

.e-grid.justify-center {
    justify-content: center;
}

.e-grid.justify-between {
    justify-content: space-between;
}

/* Grid Variants */
.e-grid.grid-market {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.e-grid.grid-dashboard {
    margin-left: 0;
    margin-right: 0;
}

.e-grid.grid-cloud {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Column Padding Utilities */
.e-col.p-0 {
    padding: 0;
}

.e-col.p-1 {
    padding: var(--s-1);
}

.e-col.p-2 {
    padding: var(--s-2);
}

.e-col.p-4 {
    padding: var(--s-4);
}

.e-col.p-6 {
    padding: var(--s-6);
}

.e-col.p-8 {
    padding: var(--s-8);
}

.e-col.p-10 {
    padding: var(--s-10);
}

.e-col.p-12 {
    padding: var(--s-12);
}

/* Column Base */
.e-col {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: var(--s-4);
}

/* Column Alignment (Internal Content) */
.e-col.align-center {
    align-items: center;
}

.e-col.align-end {
    align-items: flex-end;
}

.e-col.justify-center {
    justify-content: center;
}

.e-col.justify-end {
    justify-content: flex-end;
}

/* Direction Switch */
.e-col.dir-row {
    flex-direction: row;
}

.e-col.dir-col {
    flex-direction: column;
}

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

/* Width Percentages (Mobile defaults to 100%) */
@media (min-width: 769px) {
    .e-col.w-10 {
        flex: 0 0 10%;
        max-width: 10%;
    }

    .e-col.w-20 {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .e-col.w-25 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .e-col.w-33 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }

    .e-col.w-40 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .e-col.w-50 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .e-col.w-60 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .e-col.w-66 {
        flex: 0 0 66.666%;
        max-width: 66.666%;
    }

    .e-col.w-75 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .e-col.w-80 {
        flex: 0 0 80%;
        max-width: 80%;
    }

    .e-col.w-90 {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .e-col.w-100 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Mobile Specifics */
@media (max-width: 768px) {
    .e-grid {
        row-gap: var(--s-8);
    }

    .e-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .e-col.w-mobile-50 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}