/* =====================================================
   SPI UI Framework
   Grid System
   Version : 1.0.1
===================================================== */


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

.spi-container{
    width:100%;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
}

.spi-container-sm{
    width:100%;
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
}

.spi-container-md{
    width:100%;
    max-width:960px;
    margin-left:auto;
    margin-right:auto;
}

.spi-container-lg{
    width:100%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

.spi-container-fluid{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
}


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

.spi-row{
    display:flex;
    flex-wrap:wrap;
    margin-left:-12px;
    margin-right:-12px;
}

.spi-row > *{
    padding-left:12px;
    padding-right:12px;
    box-sizing:border-box;
}


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

.spi-col{
    flex:1 1 0;
    min-width:0;
}

.spi-col-auto{
    flex:0 0 auto;
}


/* =====================================================
   12 COLUMN GRID
===================================================== */

.spi-col-1{
    flex:0 0 8.333333%;
    max-width:8.333333%;
}

.spi-col-2{
    flex:0 0 16.666667%;
    max-width:16.666667%;
}

.spi-col-3{
    flex:0 0 25%;
    max-width:25%;
}

.spi-col-4{
    flex:0 0 33.333333%;
    max-width:33.333333%;
}

.spi-col-5{
    flex:0 0 41.666667%;
    max-width:41.666667%;
}

.spi-col-6{
    flex:0 0 50%;
    max-width:50%;
}

.spi-col-7{
    flex:0 0 58.333333%;
    max-width:58.333333%;
}

.spi-col-8{
    flex:0 0 66.666667%;
    max-width:66.666667%;
}

.spi-col-9{
    flex:0 0 75%;
    max-width:75%;
}

.spi-col-10{
    flex:0 0 83.333333%;
    max-width:83.333333%;
}

.spi-col-11{
    flex:0 0 91.666667%;
    max-width:91.666667%;
}

.spi-col-12{
    flex:0 0 100%;
    max-width:100%;
}


/* =====================================================
   CSS GRID BASE
===================================================== */

.spi-grid,
.spi-grid-1,
.spi-grid-2,
.spi-grid-3,
.spi-grid-4,
.spi-grid-5,
.spi-grid-6{
    display:grid;
    width:100%;
    gap:20px;
    box-sizing:border-box;
}


/* =====================================================
   CSS GRID COLUMNS
===================================================== */

.spi-grid-1{
    grid-template-columns:minmax(0,1fr);
}

.spi-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.spi-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.spi-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.spi-grid-5{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.spi-grid-6{
    grid-template-columns:repeat(6,minmax(0,1fr));
}


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

.spi-grid-auto{
    display:grid;
    width:100%;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(260px,100%),1fr)
        );
    gap:20px;
    box-sizing:border-box;
}


/* =====================================================
   GRID ITEM SPAN
===================================================== */

.spi-grid-span-2{
    grid-column:span 2;
}

.spi-grid-span-3{
    grid-column:span 3;
}

.spi-grid-span-full{
    grid-column:1 / -1;
}


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

.spi-align-start{
    align-items:flex-start;
}

.spi-align-center{
    align-items:center;
}

.spi-align-end{
    align-items:flex-end;
}

.spi-align-stretch{
    align-items:stretch;
}

.spi-justify-start{
    justify-content:flex-start;
}

.spi-justify-center{
    justify-content:center;
}

.spi-justify-end{
    justify-content:flex-end;
}

.spi-justify-between{
    justify-content:space-between;
}

.spi-justify-around{
    justify-content:space-around;
}

.spi-justify-evenly{
    justify-content:space-evenly;
}


/* =====================================================
   GAP
===================================================== */

.spi-gap-0{
    gap:0;
}

.spi-gap-1{
    gap:4px;
}

.spi-gap-2{
    gap:8px;
}

.spi-gap-3{
    gap:12px;
}

.spi-gap-4{
    gap:16px;
}

.spi-gap-5{
    gap:20px;
}

.spi-gap-6{
    gap:24px;
}

.spi-gap-7{
    gap:32px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

/*
   <= 1200px
   Laptop kecil / tablet landscape
*/
@media(max-width:1200px){

    .spi-grid-5,
    .spi-grid-6{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

}


/*
   <= 992px
   Tablet
*/
@media(max-width:992px){

    .spi-grid-3,
    .spi-grid-4,
    .spi-grid-5,
    .spi-grid-6{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .spi-col-1,
    .spi-col-2,
    .spi-col-3,
    .spi-col-4,
    .spi-col-5,
    .spi-col-6,
    .spi-col-7,
    .spi-col-8,
    .spi-col-9,
    .spi-col-10,
    .spi-col-11,
    .spi-col-12{
        flex:0 0 100%;
        max-width:100%;
    }

    .spi-grid-span-2,
    .spi-grid-span-3{
        grid-column:span 1;
    }

}


/*
   <= 768px
   Tablet portrait / mobile besar
*/
@media(max-width:768px){

    .spi-grid-2,
    .spi-grid-3,
    .spi-grid-4,
    .spi-grid-5,
    .spi-grid-6{
        grid-template-columns:1fr;
    }

    .spi-container,
    .spi-container-fluid{
        padding-left:16px;
        padding-right:16px;
    }

    .spi-row{
        margin-left:-8px;
        margin-right:-8px;
    }

    .spi-row > *{
        padding-left:8px;
        padding-right:8px;
    }

    .spi-grid,
    .spi-grid-1,
    .spi-grid-2,
    .spi-grid-3,
    .spi-grid-4,
    .spi-grid-5,
    .spi-grid-6,
    .spi-grid-auto{
        gap:16px;
    }

}


/*
   <= 480px
   Mobile kecil
*/
@media(max-width:480px){

    .spi-container,
    .spi-container-fluid{
        padding-left:12px;
        padding-right:12px;
    }

    .spi-grid,
    .spi-grid-1,
    .spi-grid-2,
    .spi-grid-3,
    .spi-grid-4,
    .spi-grid-5,
    .spi-grid-6,
    .spi-grid-auto{
        gap:12px;
    }

}