/* ==========================================================
   CENTURION
   LAYOUT
   ========================================================== */

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

body{

    background:var(--color-bg);

    color:var(--color-text);

    overflow-x:hidden;

}

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

.container{

    width:min(100% - 48px,var(--container));

    margin-inline:auto;

}

.container-wide{

    width:min(100% - 48px,var(--container-wide));

    margin-inline:auto;

}

.container-narrow{

    width:min(100% - 48px,980px);

    margin-inline:auto;

}

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

.section{

    position:relative;

    padding:var(--space-4xl) 0;

}

.section-sm{

    padding:var(--space-3xl) 0;

}

.section-lg{

    padding:180px 0;

}

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

.grid{

    display:grid;

    gap:var(--space-xl);

}

.grid-2{

    display:grid;

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

    gap:var(--space-3xl);

    align-items:center;

}

.grid-3{

    display:grid;

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

    gap:var(--space-xl);

}

.grid-4{

    display:grid;

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

    gap:var(--space-xl);

}

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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   WIDTH
   ========================================================== */

.w-full{

    width:100%;

}

.w-auto{

    width:auto;

}

/* ==========================================================
   HEIGHT
   ========================================================== */

.h-screen{

    min-height:100vh;

}

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

.mt-lg{

    margin-top:var(--space-3xl);

}

.mb-lg{

    margin-bottom:var(--space-3xl);

}

.py{

    padding-block:var(--space-5xl);

}

/* ==========================================================
   POSITION
   ========================================================== */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

/* ==========================================================
   OVERFLOW
   ========================================================== */

.overflow-hidden{

    overflow:hidden;

}