/* ===========================================================
   LAYOUT.CSS
   People & Culture at Work
   Enterprise Layout System
   =========================================================== */

/* ===========================================================
   CONTAINER
=========================================================== */

.container{

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

    margin-inline:auto;

}

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

section{

    padding:var(--space-96) 0;

    position:relative;

}

.section-small{

    padding:var(--space-64) 0;

}

.section-large{

    padding:120px 0;

}

/* ===========================================================
   DISPLAY UTILITIES
=========================================================== */

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.block{

    display:block;

}

.inline-flex{

    display:inline-flex;

}

/* ===========================================================
   FLEX UTILITIES
=========================================================== */

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.align-center{

    align-items:center;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-sm{

    gap:16px;

}

.gap-md{

    gap:24px;

}

.gap-lg{

    gap:40px;

}

/* ===========================================================
   HERO GRID
=========================================================== */

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

    min-height:calc(100vh - 120px);

}

/* ===========================================================
   TWO COLUMN
=========================================================== */

.two-column{

    display:grid;

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

    gap:60px;

    align-items:center;

}

/* ===========================================================
   THREE COLUMN
=========================================================== */

.three-column{

    display:grid;

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

    gap:32px;

}

/* ===========================================================
   FOUR COLUMN
=========================================================== */

.four-column{

    display:grid;

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

    gap:30px;

}

/* ===========================================================
   AUTO GRID
=========================================================== */

.auto-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:32px;

}

/* ===========================================================
   SERVICE GRID
=========================================================== */

.services-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:36px;

}

/* ===========================================================
   TRUST GRID
=========================================================== */

.trust-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

/* ===========================================================
   WHY GRID
=========================================================== */

.why-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

/* ===========================================================
   PROCESS GRID
=========================================================== */

.process-grid{

    display:grid;

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

    gap:30px;

}

/* ===========================================================
   FAQ GRID
=========================================================== */

.faq-grid{

    display:grid;

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

    gap:28px;

}

/* ===========================================================
   FOOTER GRID
=========================================================== */

.footer-grid{

    display:grid;

    grid-template-columns:

        2fr
        1fr
        1fr
        1.3fr;

    gap:50px;

}

/* ===========================================================
   CTA BUTTONS
=========================================================== */

.hero-buttons,

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:32px;

}

/* ===========================================================
   FEATURE PILLS
=========================================================== */

.hero-features{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:40px;

}

/* ===========================================================
   TEXT WIDTHS
=========================================================== */

.content-small{

    max-width:650px;

}

.content-medium{

    max-width:850px;

}

.content-large{

    max-width:1100px;

}

/* ===========================================================
   MARGINS
=========================================================== */

.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}
.mb-32{margin-bottom:32px;}
.mb-48{margin-bottom:48px;}
.mb-64{margin-bottom:64px;}

.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}
.mt-48{margin-top:48px;}
.mt-64{margin-top:64px;}

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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

min-height:auto;

}

.two-column{

grid-template-columns:1fr;

}

.process-grid{

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

}

.footer-grid{

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

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

.process-grid,

.faq-grid,

.footer-grid,

.three-column,

.four-column{

grid-template-columns:1fr;

}

.hero-buttons,

.cta-buttons,

.hero-features{

justify-content:center;

}

}