/*======================================
EIVOX LAYOUT CSS
Version: 1.0
======================================*/


/*======================================
APP
======================================*/

.app{
    position:relative;
    width:100%;
    min-height:100vh;
    background:var(--background);
    overflow:hidden;
}


/*======================================
CONTAINERS
======================================*/

.container{
    width:100%;
    max-width:var(--container-lg);
    margin:auto;
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}

.container-fluid{
    width:100%;
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}

.container-sm{
    max-width:768px;
    margin:auto;
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}

.container-md{
    max-width:992px;
    margin:auto;
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}

.container-lg{
    max-width:1200px;
    margin:auto;
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}

.container-xl{
    max-width:1440px;
    margin:auto;
    padding-left:var(--space-4);
    padding-right:var(--space-4);
}


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

.section{
    padding:var(--space-8) 0;
}

.section-sm{
    padding:var(--space-6) 0;
}

.section-lg{
    padding:var(--space-10) 0;
}


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

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

.page-content{
    width:100%;
}


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

.stack{
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

.stack-sm{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}

.stack-lg{
    display:flex;
    flex-direction:column;
    gap:var(--space-6);
}


/*======================================
ROW
======================================*/

.row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-4);
}


/*======================================
COLUMNS
======================================*/

.col{
    flex:1;
    min-width:0;
}


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

.grid-auto{
    display:grid;
    gap:var(--space-4);
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.grid-small{
    display:grid;
    gap:var(--space-4);
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.grid-medium{
    display:grid;
    gap:var(--space-5);
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.grid-large{
    display:grid;
    gap:var(--space-6);
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}


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

.content{
    width:100%;
    max-width:900px;
    margin:auto;
}

.content-wide{
    width:100%;
    max-width:1100px;
    margin:auto;
}

.content-full{
    width:100%;
}


/*======================================
ASPECT RATIO
======================================*/

.aspect-square{
    aspect-ratio:1/1;
}

.aspect-video{
    aspect-ratio:16/9;
}

.aspect-portrait{
    aspect-ratio:4/5;
}


/*======================================
SPACERS
======================================*/

.space-top{
    margin-top:var(--space-8);
}

.space-bottom{
    margin-bottom:var(--space-8);
}


/*======================================
DIVIDER
======================================*/

.divider{
    width:100%;
    height:1px;
    background:var(--border);
}


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

/* Tablet */

@media (max-width:991px){

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl{
        padding-left:20px;
        padding-right:20px;
    }

}


/* Mobile */

@media (max-width:767px){

    .section{
        padding:40px 0;
    }

    .section-lg{
        padding:60px 0;
    }

    .row{
        flex-direction:column;
    }

    .grid-auto,
    .grid-small,
    .grid-medium,
    .grid-large{
        grid-template-columns:1fr;
    }

}


/* Large Desktop */

@media (min-width:1600px){

    .container{
        max-width:1500px;
    }

}