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

.container{
    width: min(90%, var(--container));
    margin-inline: auto;
}

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

.section{
    padding: 100px 0;
}

.section-sm{
    padding: 70px 0;
}

.section-lg{
    padding: 130px 0;
}

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

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

.grid{
    display: grid;
    gap: 30px;
}

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

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

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

/* ==========================
   TEXT
========================== */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}