/* ==========================================================================
   HAUS OF LESS
   Sections
   Version: 2.0
   ========================================================================== */

/* ==========================================================
   Section
========================================================== */

.section{

    position:relative;

    overflow:hidden;

}

.section > *{

    position:relative;

    z-index:2;

}

/* ==========================================================
   Section Intro
========================================================== */

.section-intro{

    max-width:760px;

    margin:0 auto 3.5rem;

    text-align:center;

}

.section-intro.left{

    margin:0 0 3.5rem;

    text-align:left;

}

.section-intro.small{

    max-width:620px;

}

.section-intro.large{

    max-width:900px;

}

/* ==========================================================
   Editorial Intro
========================================================== */

.editorial-label{

    margin-bottom:1rem;

}

.editorial-content{

    max-width:760px;

}

.editorial-content h2{

    margin-bottom:1.5rem;

}

.editorial-content p{

    margin-bottom:1.5rem;

}

/* ==========================================================
   Split Intro
========================================================== */

.split-intro{

    margin-bottom:3.5rem;

}

.split-intro h2{

    max-width:12ch;

}

.split-intro p{

    max-width:540px;

}

/* ==========================================================
   Section CTA
========================================================== */

.section-cta{

    margin-top:3rem;

}

.section-cta.center{

    text-align:center;

}

.section-cta.left{

    text-align:left;

}

/* ==========================================================
   Divider
========================================================== */

.section-divider{

    width:100%;

    height:1px;

    margin:4rem 0;

    background:var(--border-light);

}

/* ==========================================================
   Decorative Layer
========================================================== */

.section::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.03;

}

/* ==========================================================
   Forest Sections
========================================================== */

.section-forest h1,
.section-forest h2,
.section-forest h3,
.section-forest h4{

    color:#ffffff;

}

.section-forest p{

    color:rgba(255,255,255,.84);

}

.section-forest .section-label{

    color:#D4B47A;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:992px){

    .section-intro,
    .section-intro.left,
    .split-intro{

        margin-bottom:3rem;

    }

}

@media(max-width:768px){

    .section-intro,
    .section-intro.left{

        max-width:100%;

    }

    .section-intro,
    .section-intro.left,
    .split-intro{

        margin-bottom:2.5rem;

    }

    .section-cta{

        margin-top:2.5rem;

    }

    .section-divider{

        margin:3rem 0;

    }

}