/* ==========================================================
   Layout
   ========================================================== */

/*--------------------------------------------------------------
# Containers
--------------------------------------------------------------*/

.container{

    width:min(92%, var(--container));
    margin-inline:auto;

}

.container.narrow{

    max-width:860px;

}

.container.wide{

    max-width:1440px;

}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

.section{

    padding:120px 0;

}

.section-sm{

    padding:80px 0;

}

.section-lg{

    padding:160px 0;

}

.section-light{

    background:#f8f8f8;

}

.section-dark{

    background:var(--color-primary);
    color:#fff;

}

/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

.grid{

    display:grid;
    gap:2.5rem;

}

.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 Header
--------------------------------------------------------------*/

.section-header{

    max-width:760px;
    margin:0 auto 80px;

    text-align:center;

}

.section-kicker{

    display:block;

    margin-bottom:20px;

    color:var(--color-accent);

    text-transform:uppercase;

    letter-spacing:.3em;

    font-size:.8rem;

    font-weight:600;

}

.section-title{

    margin-bottom:24px;

}

.section-description{

    color:var(--color-text-light);

    font-size:1.15rem;

    line-height:1.8;

}