/* ==========================================================
   CRESTBRIDGE PREMIUM DESIGN SYSTEM
   Layout v3.0
========================================================== */


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

.container-custom{

    width:100%;
    max-width:var(--container);

    margin:0 auto;

    padding:0 28px;

}


/* ==========================================================
   SECTIONS
========================================================== */

.section{

    padding:
        var(--space-section-top)
        0
        var(--space-section-bottom);

}

.section-sm{

    padding:
        var(--space-section-sm-top)
        0
        var(--space-section-sm-bottom);
    
}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.section-header{

    max-width:var(--content-editorial);

    margin:0 auto var(--space-content);

    text-align:center;

}

.section-header--left{

    max-width:900px;

    margin:0 0 var(--space-content);

    text-align:left;

}

.section-tag{

    display:inline-block;

    position:relative;

    padding-left:56px;

    margin-bottom:var(--space-sm);

    font-size:var(--fs-xs);

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--gold);

}

.section-tag::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:40px;

    height:2px;

    background:currentColor;

    transform:translateY(-50%);

}

.section-header h2{

    margin-bottom:var(--space-sm);

}

.section-header p{

    max-width:var(--content-reading);

    margin:0 auto;

}

.section-header--left p{

    max-width:720px;

    margin:0;

}


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

.grid-2{

    display:grid;

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

    gap:80px;

    align-items:center;

}

.grid-3{

    display:grid;

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

    gap:35px;

}

.grid-4{

    display:grid;

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

    gap:30px;

}

.grid-auto{

    display:grid;

    gap:var(--space-lg);

}


/* ==========================================================
   FLEX HELPERS
========================================================== */

.flex{

    display:flex;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-gap{

    display:flex;

    gap:var(--space-md);

}


/* ==========================================================
   CONTENT WIDTHS
========================================================== */

.content-sm{

    max-width:var(--content-sm);

}

.content{

    max-width:var(--content-md);

}

.content-lg{

    max-width:var(--content-lg);

}

.content-xl{

    max-width:var(--content-xl);

}


/* ==========================================================
   SPACING HELPERS
========================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:var(--space-sm);}
.mt-2{margin-top:var(--space-md);}
.mt-3{margin-top:var(--space-lg);}
.mt-4{margin-top:var(--space-xl);}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--space-sm);}
.mb-2{margin-bottom:var(--space-md);}
.mb-3{margin-bottom:var(--space-lg);}
.mb-4{margin-bottom:var(--space-xl);}


/* ==========================================================
   DIVIDERS
========================================================== */

.divider{

    width:100%;

    height:1px;

    margin:var(--space-xl) 0;

    background:var(--border-light);

}


/* ==========================================================
   BACKGROUND HELPERS
========================================================== */

.bg-white{

    background:var(--white);

}

.bg-light{

    background:var(--silver);

}

.bg-dark{

    background:var(--gradient-primary);

    color:#FFFFFF;

}


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

@media(max-width:991px){

    .section{

        padding:
            var(--space-section-top-tablet)
            0
            var(--space-section-bottom-tablet);

    }

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

        grid-template-columns:1fr;

        gap:40px;

    }

    .section-header{

        margin-bottom:40px;

    }

    .section-header--left{

        margin-bottom:36px;

    }

    .container-custom{

        padding:0 22px;

    }

}