/*==================================================
03 Layout
==================================================*/

.it-container{

    width:min(
        calc(100% - 40px),
        var(--container)
    );

    margin-inline:auto;

}

.it-container-wide{

    width:min(
        calc(100% - 40px),
        var(--container-wide)
    );

    margin-inline:auto;

}


.it-flex{

    display:flex;

}

.it-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.it-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.it-column{

    display:flex;

    flex-direction:column;

}


/*==================================================
 Grid Layout
==================================================*/

.it-grid{

    display:grid;

    gap:var(--space-6);

}

/*----------------------------------
 Column
----------------------------------*/

.it-grid-2{

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

}


.it-grid-3{

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

}


.it-grid-4{

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

}

/*----------------------------------
 Gap Variation
----------------------------------*/

.it-grid-gap-sm{

    gap:var(--space-4);

}


.it-grid-gap-md{

    gap:var(--space-6);

}


.it-grid-gap-lg{

    gap:var(--space-8);

}