/*==========================================================
    IMPACTA GAMES
    DESIGN SYSTEM

    LAYOUT
==========================================================*/


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

.ig-container{

    width:min(
        calc(100% - (var(--ig-container-padding) * 2)),
        var(--ig-container-width)
    );

    margin-inline:auto;

}


/*==========================================================
    CONTENT WIDTH
==========================================================*/

.ig-content-xs{

    width:100%;
    max-width:var(--ig-content-xs);
    margin-inline:auto;

}

.ig-content-sm{

    width:100%;
    max-width:var(--ig-content-sm);
    margin-inline:auto;

}

.ig-content-md{

    width:100%;
    max-width:var(--ig-content-md);
    margin-inline:auto;

}

.ig-content-lg{

    width:100%;
    max-width:var(--ig-content-lg);
    margin-inline:auto;

}

.ig-content-xl{

    width:100%;
    max-width:var(--ig-content-xl);
    margin-inline:auto;

}


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

.ig-section{

    padding-block:var(--ig-section-spacing);

}

.ig-section-sm{

    padding-block:calc(var(--ig-section-spacing) * .6);

}

.ig-section-lg{

    padding-block:calc(var(--ig-section-spacing) * 1.4);

}


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

.ig-grid{

    display:grid;

    gap:var(--ig-space-6);

}

.ig-grid-2{

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

}

.ig-grid-3{

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

}

.ig-grid-4{

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

}

.ig-grid-5{

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

}

.ig-grid-6{

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

}


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

.ig-auto-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:var(--ig-space-6);

}


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

.ig-flex{

    display:flex;

}

.ig-inline-flex{

    display:inline-flex;

}

.ig-flex-column{

    flex-direction:column;

}

.ig-flex-row{

    flex-direction:row;

}

.ig-flex-wrap{

    flex-wrap:wrap;

}

.ig-flex-nowrap{

    flex-wrap:nowrap;

}


/*==========================================================
    ALIGN ITEMS
==========================================================*/

.ig-items-start{

    align-items:flex-start;

}

.ig-items-center{

    align-items:center;

}

.ig-items-end{

    align-items:flex-end;

}

.ig-items-stretch{

    align-items:stretch;

}


/*==========================================================
    JUSTIFY CONTENT
==========================================================*/

.ig-justify-start{

    justify-content:flex-start;

}

.ig-justify-center{

    justify-content:center;

}

.ig-justify-end{

    justify-content:flex-end;

}

.ig-justify-between{

    justify-content:space-between;

}

.ig-justify-around{

    justify-content:space-around;

}

.ig-justify-evenly{

    justify-content:space-evenly;

}


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

.ig-flex-1{

    flex:1;

}

.ig-flex-auto{

    flex:auto;

}

.ig-flex-none{

    flex:none;

}


/*==========================================================
    STACK
==========================================================*/

.ig-stack{

    display:flex;

    flex-direction:column;

    gap:var(--ig-space-5);

}

.ig-stack-xs{

    gap:var(--ig-space-2);

}

.ig-stack-sm{

    gap:var(--ig-space-3);

}

.ig-stack-lg{

    gap:var(--ig-space-7);

}

.ig-stack-xl{

    gap:var(--ig-space-9);

}


/*==========================================================
    CLUSTER
==========================================================*/

.ig-cluster{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:var(--ig-space-4);

}

.ig-cluster-sm{

    gap:var(--ig-space-2);

}

.ig-cluster-lg{

    gap:var(--ig-space-6);

}


/*==========================================================
    CENTER
==========================================================*/

.ig-center{

    display:grid;

    place-items:center;

}

.ig-center-x{

    display:flex;

    justify-content:center;

}

.ig-center-y{

    display:flex;

    align-items:center;

}


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

.ig-gap-1{gap:var(--ig-space-1);}
.ig-gap-2{gap:var(--ig-space-2);}
.ig-gap-3{gap:var(--ig-space-3);}
.ig-gap-4{gap:var(--ig-space-4);}
.ig-gap-5{gap:var(--ig-space-5);}
.ig-gap-6{gap:var(--ig-space-6);}
.ig-gap-7{gap:var(--ig-space-7);}
.ig-gap-8{gap:var(--ig-space-8);}
.ig-gap-9{gap:var(--ig-space-9);}
.ig-gap-10{gap:var(--ig-space-10);}


/*==========================================================
    POSITION
==========================================================*/

.ig-relative{

    position:relative;

}

.ig-absolute{

    position:absolute;

}

.ig-fixed{

    position:fixed;

}

.ig-sticky{

    position:sticky;

}


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

.ig-overflow-hidden{

    overflow:hidden;

}

.ig-overflow-visible{

    overflow:visible;

}

.ig-overflow-auto{

    overflow:auto;

}


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

.ig-w-full{

    width:100%;

}

.ig-h-full{

    height:100%;

}


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

.ig-block{

    display:block;

}

.ig-inline{

    display:inline;

}

.ig-inline-block{

    display:inline-block;

}

.ig-hidden{

    display:none;

}
/* ==========================================================
   SHARED SPACE STAGE
========================================================== */

.ig-space-stage{

    position: relative;

    width: 100%;

    isolation: isolate;

}

#igHero,
#igServices,
#igProjects{

    position: relative;

    z-index: 2;

}

.ig-space-stage > #igAbout,
.ig-space-stage > #igClients,
.ig-space-stage > #igContact,
.ig-space-stage > #igFooter{

    position: relative;

    z-index: 1;

}