/* ==========================================
   CONTAINER
========================================== */

/* ==========================================
   GRID
========================================== */

.grid{
    display: grid;
    gap: var(--space-md);
}

.grid-2{
    grid-template-columns: repeat(2, 1fr);
}

.grid-3{
    grid-template-columns: repeat(3, 1fr);
}

.grid-4{
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================
   FLEX
========================================== */

.flex{
    display: flex;
}

.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

/* ==========================================
   SECTION
========================================== */

.section{
    padding: var(--section-padding) 0;
}

/* ==========================================
   CONTAINER
========================================== */

.container{
    width: min(var(--container-width), calc(100% - (var(--container-padding) * 2)));
    margin-inline: auto;
}

/* ==========================================
   SECTION
========================================== */

.section-padding{
    padding: var(--section-padding) 0;
}