/* ==========================================================
   GENERAL.CSS
   Estils comuns de les seccions
========================================================== */


/* ----------------------------------------------------------
   SECTIONS
---------------------------------------------------------- */

section{

    position:relative;

    overflow:hidden;

}

section:nth-child(even){

    background:var(--color-background-alt);

}


/* ----------------------------------------------------------
   SECTION HEADER
---------------------------------------------------------- */

.section-heading{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

}

.section-heading h2{

    margin-bottom:1rem;

}

.section-heading p{

    font-size:1.1rem;

    margin:0;

}


/* ----------------------------------------------------------
   EYEBROW
---------------------------------------------------------- */

.eyebrow{

    display:inline-block;

    margin-bottom:1rem;

    padding:.45rem 1rem;

    border-radius:999px;

    background:rgba(2,131,48,.08);

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ----------------------------------------------------------
   INTRO TEXT
---------------------------------------------------------- */

.section-intro{

    max-width:760px;

    margin:0 auto 3rem;

    text-align:center;

    font-size:1.15rem;

}


/* ----------------------------------------------------------
   TWO COLUMNS
---------------------------------------------------------- */

.two-columns{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:5rem;

    align-items:center;

}

.two-columns--reverse{

    direction:rtl;

}

.two-columns--reverse > *{

    direction:ltr;

}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.content > *:last-child{

    margin-bottom:0;

}


/* ----------------------------------------------------------
   IMAGE
---------------------------------------------------------- */

.image img{

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.grid{

    display:grid;

    gap:2rem;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}


/* ----------------------------------------------------------
   CARDS
---------------------------------------------------------- */

.card{

    padding:2rem;

}

.card h3{

    margin-bottom:1rem;

}

.card p:last-child{

    margin-bottom:0;

}


/* ----------------------------------------------------------
   CTA
---------------------------------------------------------- */

.cta{

    margin-top:4rem;

    text-align:center;

}


/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

footer{

    padding:3rem 0;

    border-top:1px solid var(--color-border);

    text-align:center;

    background:#fff;

}

footer p{

    margin:0;

    font-size:.95rem;

}


/* ----------------------------------------------------------
   SPACING
---------------------------------------------------------- */

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

.mt-0{margin-top:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width:992px){

    .two-columns{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .grid-4{

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

    }

}

@media (max-width:768px){

    .section-heading{

        margin-bottom:3rem;

    }

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

        grid-template-columns:1fr;

    }

}