/* ==========================================================
Project : Compro Doodle
Module  : Layout
File    : container.css
Version : 1.0.0
Author  : Doodle Engineering
========================================================== */

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

.page{

    width:100%;

    min-height:100%;

}

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

.main{

    width:100%;

    flex:1;

}

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

.main-content{

    flex:1;

    display:block;

}

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

.container{

    width:100%;

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

    margin-inline:auto;

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

}

/* ==========================================================
   OUTER FRAME
========================================================== */

.outer-frame{

    width:100%;

    max-width:calc(var(--container-xl) + (var(--space-24) * 2));

    margin-inline:auto;

    padding:

        var(--space-24)

        var(--space-24)

        var(--space-48);

}

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

.main-container{

    width:100%;

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

    margin-inline:auto;

    padding:

        0

        var(--space-24)

        var(--space-48);

}

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

.section{

    width:100%;

    padding-block:var(--section-space-sm);

}

.section-sm{

    padding-block:var(--section-space-xs);

}

.section-lg{

    padding-block:var(--section-space-lg);

}

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

.grid{

    display:grid;

    gap:var(--grid-gap-md);

}

.grid-2{

    display:grid;

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

    gap:var(--grid-gap-lg);

}

.grid-3{

    display:grid;

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

    gap:var(--grid-gap-lg);

}

.grid-4{

    display:grid;

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

    gap:var(--grid-gap-lg);

}

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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

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

@media (max-width:1024px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}

@media (max-width:768px){

    .container,

    .main-container,

    .outer-frame{

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

    }

    .grid-2,

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .container,

    .main-container,

    .outer-frame{

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

    }

}