/* ======================================================
   Architecture Website Framework
   Layout CSS
   Version 1.0
======================================================*/


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

.container{

    width:min(var(--container),92%);
    margin:0 auto;

}


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

section{

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

}


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

.flex{

    display:flex;

}

.grid{

    display:grid;

}


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

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

}


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

.grid-2{

    display:grid;

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

    gap:var(--section-gap);

}

.grid-3{

    display:grid;

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

    gap:50px;

}

.grid-4{

    display:grid;

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

    gap:40px;

}


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

.items-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.text-center{

    text-align:center;

}