/* ==========================================================
   MAMGOC Website V2
   02-layout.css
   Containers, sections, grids, flex and layout utilities
========================================================== */

.container{
    width:min(100% - 40px,var(--container));
    margin-inline:auto;
}

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

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

.section-lg{
    padding:9rem 0;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    align-items:center;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

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

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.gap-sm{
    gap:1rem;
}

.gap-md{
    gap:2rem;
}

.gap-lg{
    gap:4rem;
}

.mb-sm{
    margin-bottom:1rem;
}

.mb-md{
    margin-bottom:2rem;
}

.mb-lg{
    margin-bottom:4rem;
}

.mt-sm{
    margin-top:1rem;
}

.mt-md{
    margin-top:2rem;
}

.mt-lg{
    margin-top:4rem;
}

.w-full{
    width:100%;
}

.max-600{
    max-width:600px;
}

.max-700{
    max-width:700px;
}

.max-800{
    max-width:800px;
}

.mx-auto{
    margin-inline:auto;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.overflow-hidden{
    overflow:hidden;
}