/* =========================
   GLOBAL GRID SYSTEM
========================= */


/* Main Container */

.container {

    width: min(90%, var(--container-width));

    margin-inline: auto;

}



/* Wide Container */

.container-wide {

    width: min(94%, 1440px);

    margin-inline: auto;

}



/* Small Container */

.container-sm {

    width: min(90%, 900px);

    margin-inline: auto;

}



/* =========================
   ROW SYSTEM
========================= */


.row {

    display: flex;

    flex-wrap: wrap;

    margin-inline: -15px;

}



.col {

    padding-inline: 15px;

    flex: 1;

}



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


.grid {

    display: grid;

    gap: var(--space-lg);

}



.grid-2 {

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

}



.grid-3 {

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

}



.grid-4 {

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

}



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


.section {

    padding-block:
    var(--space-xl);

}



.section-sm {

    padding-block:
    var(--space-lg);

}



.section-lg {

    padding-block:
    120px;

}



/* =========================
   CONTENT WIDTH
========================= */


.content-width {

    max-width:
    850px;

}



.full-width {

    width:
    100%;

}



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


@media(max-width:992px){


    .grid-4 {

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

    }


    .grid-3 {

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

    }


}



@media(max-width:768px){


    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns:
        1fr;

    }


    .section {

        padding-block:
        60px;

    }


}/* =========================
   GLOBAL GRID SYSTEM
========================= */


/* Main Container */

.container {

    width: min(90%, var(--container-width));

    margin-inline: auto;

}



/* Wide Container */

.container-wide {

    width: min(94%, 1440px);

    margin-inline: auto;

}



/* Small Container */

.container-sm {

    width: min(90%, 900px);

    margin-inline: auto;

}



/* =========================
   ROW SYSTEM
========================= */


.row {

    display: flex;

    flex-wrap: wrap;

    margin-inline: -15px;

}



.col {

    padding-inline: 15px;

    flex: 1;

}



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


.grid {

    display: grid;

    gap: var(--space-lg);

}



.grid-2 {

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

}



.grid-3 {

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

}



.grid-4 {

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

}



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


.section {

    padding-block:
    var(--space-xl);

}



.section-sm {

    padding-block:
    var(--space-lg);

}



.section-lg {

    padding-block:
    120px;

}



/* =========================
   CONTENT WIDTH
========================= */


.content-width {

    max-width:
    850px;

}



.full-width {

    width:
    100%;

}



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


@media(max-width:992px){


    .grid-4 {

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

    }


    .grid-3 {

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

    }


}



@media(max-width:768px){


    .grid-2,
    .grid-3,
    .grid-4 {

        grid-template-columns:
        1fr;

    }


    .section {

        padding-block:
        60px;

    }


}