/*wireframe*/
/*
max widths
Screen-Lap-L 1440
Screen-Lap 1024
Screen-Tab 768
Screen-Mob-L 425
Screen-Mob-M 375
Screen-Mob-S 320
*/

*{
    box-sizing: border-box;
}

/**************************************************************** gaps */
.gap-sm{
    gap: 10px;
}
.gap-med{
    gap: 15px;
}
.gap-lrg{
    gap: 20px;
}
.gap-xlrg{
    gap: 30px;
}

.col-gap-sm{
    column-gap: 10px;
}

.col-gap-med{
    column-gap: 15px;
}
.col-gap-lrg{
    column-gap: 20px;
}
.col-gap-xlrg{
    column-gap: 30px;
}

.row-gap-sm{
    column-gap: 10px;
}
.row-gap-med{
    row-gap: 15px;
}
.row-gap-lrg{
    row-gap: 20px;
}
.row-gap-xlrg{
    row-gap: 30px;
}

/************************************************************* col and row */

.col{

}
.row{

}

/**************************************************************** grid */
.d-grid{
    display: grid;
}

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

.span-1{
    grid-column: span 1;
}
.span-2{
    grid-column: span 2;
}
.span-3{
    grid-column: span 3;
}
.span-4{
    grid-column: span 4;
}
.span-5{
    grid-column: span 5;
}
.span-6{
    grid-column: span 6;
}
.span-7{
    grid-column: span 7;
}
.span-8{
    grid-column: span 8;
}
.span-9{
    grid-column: span 9;
}
.span-10{
    grid-column: span 10;
}
.span-11{
    grid-column: span 11;
}
.span-12{
    grid-column: span 12;
}

/**************************************************************** flex */
.d-flex{
    display: flex;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-row{
    flex-direction: row;
}
.flex-row-rev{
    flex-direction: row-reverse;
}
.flex-col{
    flex-direction: column;
}
.flex-col-rev{
    flex-direction: column-reverse;
}

.flex-1{
    flex: 1;
}
.flex-2{
    flex: 2;
}
.flex-3{
    flex: 3;
}
.flex-4{
    flex: 4;
}
.flex-5{
    flex: 5;
}
.flex-6{
    flex: 6;
}
.flex-7{
    flex: 7;
}
.flex-8{
    flex: 8;
}
.flex-9{
    flex: 9;
}
.flex-10{
    flex: 10;
}


.flex-item-w-100{
    width: 100%;
}
.flex-base-10{
    flex: 1 0 10%;
}
.flex-base-20{
    flex: 1 0 20%;
}
.flex-base-25{
    flex: 1 0 25%;
}
.flex-base-33{
    flex: 1 0 33.333333333333%;
}
.flex-base-50{
    flex: 1 0 50%;
}
.flex-base-66{
    flex: 1 0 66.66666666666%;
}
.flex-base-75{
    flex: 1 0 75%;
}
.flex-base-80{
    flex: 1 0 80%;
}
.flex-base-90{
    flex: 1 0 90%;
}
.flex-base-100{
    flex: 1 0 100%;
}

.flex-grow-1{
    flex-grow: 1;
}
.flex-grow-2{
    flex-grow: 2;
}
.flex-grow-3{
    flex-grow: 3;
}
.flex-grow-3{
    flex-grow: 3;
}
.flex-grow-3{
    flex-grow: 3;
}
.flex-grow-3{
    flex-grow: 3;
}

/********************************************************************* queries */

/*secreen-tablet*/
@media screen and (max-width: 768px) {
    .span-6-screen-tab{
        grid-column: span 6;
    }
    .span-12-screen-tab{
        grid-column: span 12;
    }
    .flex-base-100-screen-tab{
        flex: 1 0 100%;
    }
    .flex-col-screen-tab{
        flex-direction: column;
    }
}