/* ==========================================
   GAMEVIA LAYOUT SYSTEM
========================================== */

.container{

    width:min(100% - 40px, 1400px);

    margin-inline:auto;

}

.section{

    padding:96px 0;

}

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.hidden{

    display:none;

}

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

.section{

    padding:var(--space-9) 0;

}

.section--small{

    padding:var(--space-8) 0;

}

.section--large{

    padding:120px 0;

}

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

.container-sm{

    width:min(100%,900px);

    margin:auto;

}

.container{

    width:min(100%,1200px);

    margin:auto;

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

}

.container-lg{

    width:min(100%,1400px);

    margin:auto;

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

}

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:var(--space-5);

}

.grid-3{

    display:grid;

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

    gap:var(--space-5);

}

.grid-4{

    display:grid;

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

    gap:var(--space-5);

}

/* ==========================================
   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;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================
   SPACING
========================================== */

.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}

.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}