/*
==================================================
Dream Kingdom
Design System v1.0
Layout System
==================================================
*/


/*=================================================
= RESET
=================================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    padding:0;

    min-height:100vh;

    font-family:var(--dk-font-family);

    background:var(--dk-bg);

    color:var(--dk-text);

}


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

.dk-page{

    width:100%;

    min-height:100vh;

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

}


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

.dk-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

}

.dk-container-sm{

    max-width:900px;

    margin:0 auto;

}

.dk-container-xs{

    max-width:600px;

    margin:0 auto;

}


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

.dk-flex{

    display:flex;

}

.dk-flex-column{

    display:flex;

    flex-direction:column;

}

.dk-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.dk-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.dk-flex-around{

    display:flex;

    justify-content:space-around;

    align-items:center;

}

.dk-flex-end{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.dk-flex-wrap{

    flex-wrap:wrap;

}


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

.dk-grid{

    display:grid;

    gap:var(--dk-space-5);

}

.dk-grid-2{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:var(--dk-space-5);

}

.dk-grid-3{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:var(--dk-space-5);

}

.dk-grid-4{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:var(--dk-space-5);

}


/*=================================================
= STACK
=================================================*/

.dk-stack-sm>*+*{

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

}

.dk-stack>*+*{

    margin-top:var(--dk-space-5);

}

.dk-stack-lg>*+*{

    margin-top:var(--dk-space-7);

}


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

.dk-gap-sm{

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

}

.dk-gap{

    gap:var(--dk-space-5);

}

.dk-gap-lg{

    gap:var(--dk-space-7);

}


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

.dk-w-100{

    width:100%;

}

.dk-h-100{

    height:100%;

}


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

.dk-text-center{

    text-align:center;

}

.dk-text-left{

    text-align:left;

}

.dk-text-right{

    text-align:right;

}


/*=================================================
= MARGIN HELPERS
=================================================*/

.dk-mt-sm{

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

}

.dk-mt{

    margin-top:var(--dk-space-5);

}

.dk-mt-lg{

    margin-top:var(--dk-space-7);

}

.dk-mb-sm{

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

}

.dk-mb{

    margin-bottom:var(--dk-space-5);

}

.dk-mb-lg{

    margin-bottom:var(--dk-space-7);

}


/*=================================================
= PADDING HELPERS
=================================================*/

.dk-p-sm{

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

}

.dk-p{

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

}

.dk-p-lg{

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

}


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

.dk-section{

    margin-bottom:var(--dk-space-8);

}