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

/* ===========================
   Container
=========================== */

.container{

    width:min(100% - 2rem,var(--container-xl));

    margin-inline:auto;

}

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

.section{

    padding-block:var(--section-padding-y);

}

.section-sm{

    padding-block:var(--space-16);

}

.section-lg{

    padding-block:var(--space-32);

}

/* ===========================
   Content Width
=========================== */

.content{

    width:min(100%,var(--content-width));

    margin-inline:auto;

}

.reading{

    width:min(100%,var(--reading-width));

    margin-inline:auto;

}

/* ===========================
   Display
=========================== */

.flex{

    display:flex;

}

.inline-flex{

    display:inline-flex;

}

.grid{

    display:grid;

}

.block{

    display:block;

}

.none{

    display:none;

}

/* ===========================
   Flex
=========================== */

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.items-center{

    align-items:center;

}

.items-start{

    align-items:flex-start;

}

.items-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-end{

    justify-content:flex-end;

}

.gap-1{

    gap:var(--space-1);

}

.gap-2{

    gap:var(--space-2);

}

.gap-3{

    gap:var(--space-3);

}

.gap-4{

    gap:var(--space-4);

}

.gap-5{

    gap:var(--space-5);

}

.gap-6{

    gap:var(--space-6);

}

.gap-8{

    gap:var(--space-8);

}

.gap-10{

    gap:var(--space-10);

}

/* ===========================
   Grid
=========================== */

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/* ===========================
   Width
=========================== */

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

/* ===========================
   Margin Auto
=========================== */

.mx-auto{

    margin-inline:auto;

}

.my-auto{

    margin-block:auto;

}

/* ===========================
   Overflow
=========================== */

.overflow-hidden{

    overflow:hidden;

}

/* ===========================
   Position
=========================== */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

/* ===========================
   Visibility
=========================== */

.hidden{

    display:none !important;

}