/* ==========================================================
   BODY
========================================================== */

body{
    padding-top:6.5rem;
}

/* ==========================================================
   CONTAINERS
========================================================== */

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

.container-sm{
    width:min(100% - 4rem,900px);
    margin-inline:auto;
}

.container-lg{
    width:min(100% - 4rem,1400px);
    margin-inline:auto;
}

.section__header{
    text-align:center;
    margin-bottom:4rem;
}

.section__title{
    margin-bottom:1.2rem;
}

.section__subtitle{
    max-width:700px;
    margin:0 auto;
    color:var(--color-text-light);
    line-height:1.8;
}

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

@media (max-width:768px){
    body{
        padding-top:7rem;
    }

    .container{
        width:min(100% - 2.5rem,var(--container-width));
    }
}