/*
|--------------------------------------------------------------------------
| WeddingUI Layout
|--------------------------------------------------------------------------
| Version : 1.0.0
| Author  : WeddingUI
|--------------------------------------------------------------------------
*/

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

body{
    background: var(--background-body);
    overflow-x: hidden;
}


/* ==========================================================
   PAGE
========================================================== */

.page{
    width:100%;
    min-height:100vh;
}


/* ==========================================================
   MAIN
========================================================== */

main{
    position:relative;
    width:100%;
}


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

.container{

    width:100%;

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

    margin-inline:auto;

    padding-inline:var(--space-6);

}


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

.container-sm{

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

}

.container-md{

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

}

.container-lg{

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

}

.container-xl{

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

}


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

.section{

    position:relative;

    width:100%;

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

}

.section-sm{

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

}

.section-lg{

    padding-block:calc(var(--space-10) * 1.5);

}


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

.flex{

    display:flex;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-wrap{

    display:flex;

    flex-wrap:wrap;

}


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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:var(--space-6);

}

.grid-3{

    display:grid;

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

    gap:var(--space-6);

}

.grid-4{

    display:grid;

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

    gap:var(--space-6);

}


/* ==========================================================
   GAP
========================================================== */

.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-7{gap:var(--space-7);}
.gap-8{gap:var(--space-8);}


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

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}


/* ==========================================================
   ALIGNMENT
========================================================== */

.items-start{

    align-items:flex-start;

}

.items-center{

    align-items:center;

}

.items-end{

    align-items:flex-end;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:flex-end;

}

.justify-between{

    justify-content:space-between;

}


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

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}


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

.overflow-hidden{

    overflow:hidden;

}


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

.mt-auto{

    margin-top:auto;

}

.mb-auto{

    margin-bottom:auto;

}

.mx-auto{

    margin-inline:auto;

}

.my-auto{

    margin-block:auto;

}


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

.hidden{

    display:none !important;

}

.block{

    display:block;

}

.inline-block{

    display:inline-block;

}


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

@media (max-width:1024px){

    .container{

        padding-inline:var(--space-5);

    }

    .grid-4{

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

    }

}

@media (max-width:768px){

    .container{

        padding-inline:var(--space-4);

    }

    .section{

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

    }

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

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .container{

        padding-inline:var(--space-3);

    }

    .section{

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

    }

}