/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/core/grid.css
    Description: Containers, Grid System & Layout Utilities
==========================================================*/


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

.container{

    width:100%;

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

    margin-inline:auto;

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

}

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

}

.container-full{

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

}

.container-fluid{

    width:100%;

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

}


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

.row{

    display:flex;

    flex-wrap:wrap;

    margin-inline:calc(var(--space-3) * -1);

}

.row>*{

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

}


/*==========================================================
    MARKETPLACE PRODUCT GRID
==========================================================*/

.market-grid{

    display:grid;

    gap:var(--product-gap);

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

}


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

.grid-auto{

    display:grid;

    gap:var(--product-gap);

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

}


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

.grid{

    display:grid;

}

.grid-1{

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

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-5{

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

}

.grid-6{

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

}

.grid-7{

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

}

.grid-8{

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

}


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

.items-start{

    align-items:start;

}

.items-center{

    align-items:center;

}

.items-end{

    align-items:end;

}

.justify-start{

    justify-content:start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:end;

}

.justify-between{

    justify-content:space-between;

}

.justify-around{

    justify-content:space-around;

}

.justify-evenly{

    justify-content:space-evenly;

}


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

.flex{

    display:flex;

}

.inline-flex{

    display:inline-flex;

}

.flex-column{

    flex-direction:column;

}

.flex-row{

    flex-direction:row;

}

.flex-wrap{

    flex-wrap:wrap;

}

.flex-nowrap{

    flex-wrap:nowrap;

}

.flex-grow{

    flex-grow:1;

}

.flex-shrink{

    flex-shrink:1;

}

.flex-1{

    flex:1;

}


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

.align-start{

    align-items:flex-start;

}

.align-center{

    align-items:center;

}

.align-end{

    align-items:flex-end;

}

.align-stretch{

    align-items:stretch;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:flex-end;

}

.justify-between{

    justify-content:space-between;

}

.justify-around{

    justify-content:space-around;

}

.justify-evenly{

    justify-content:space-evenly;

}


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

.gap-0{gap:0;}

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

.gap-10{gap:var(--space-10);}

.gap-12{gap:var(--space-12);}


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

.w-auto{

    width:auto;

}

.w-25{

    width:25%;

}

.w-33{

    width:33.333%;

}

.w-50{

    width:50%;

}

.w-66{

    width:66.666%;

}

.w-75{

    width:75%;

}

.w-100{

    width:100%;

}

.max-w-100{

    max-width:100%;

}


/*==========================================================
    HEIGHT UTILITIES
==========================================================*/

.h-auto{

    height:auto;

}

.h-100{

    height:100%;

}

.min-vh-100{

    min-height:100vh;

}


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

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}

.overflow-x-auto{

    overflow-x:auto;

}

.overflow-y-auto{

    overflow-y:auto;

}


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

@media (max-width:1400px){

    .market-grid{

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

    }

}


@media (max-width:1200px){

    .market-grid{

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

    }

}


@media (max-width:992px){

    .market-grid{

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

    }

}


@media (max-width:768px){

    .market-grid{

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

    }

}


@media (max-width:480px){

    .market-grid{

        gap:var(--space-3);

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

    }

}