/**
 * ==================================================
 * LAYOUT
 * Francesco Cugini Theme
 * Design System v2.0
 * ==================================================
 */


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

.container{

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

    margin-inline:auto;

}

.container-small{

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

    margin-inline:auto;

}

.container-wide{

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

    margin-inline:auto;

}


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

.section{

    padding:var(--section-padding) 0;

}

.section-sm{

    padding:calc(var(--section-padding) * .6) 0;

}

.section-lg{

    padding:calc(var(--section-padding) * 1.3) 0;

}


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

.flex{

    display:flex;

}

.grid{

    display:grid;

}


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

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.flex-nowrap{

    flex-wrap:nowrap;

}

.flex-1{

    flex:1;

}


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

.grid-2{

    display:grid;

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

    gap:var(--space-xl);

}

.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);

}


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

.auto-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:var(--space-xl);

}


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

.stack > * + *{

    margin-top:var(--space-lg);

}


/*==================================================
CLUSTER
==================================================*/

.cluster{

    display:flex;

    flex-wrap:wrap;

    gap:var(--space-md);

}


/*==================================================
SIDEBAR
==================================================*/

.sidebar-layout{

    display:grid;

    grid-template-columns:300px 1fr;

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

}


/*==================================================
COVER
==================================================*/

.cover{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:100vh;

}


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

@media (max-width:992px){

    .grid-4{

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

    }

    .sidebar-layout{

        grid-template-columns:1fr;

    }

}


@media (max-width:768px){

    .grid-2,

    .grid-3,

    .grid-4,

    .auto-grid{

        grid-template-columns:1fr;

    }

    .section{

        padding:5rem 0;

    }

    .section-lg{

        padding:6rem 0;

    }

}