
/* Flex Related Class */
.flex-row{
    display: flex;
}

.flex-col{
    display: flex;
    flex-direction: column;
}

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

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse{
    flex-wrap: wrap-reverse;
}

.inline-flex{
    display: inline-flex;
}

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

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

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



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

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

.flex-xy-center{
    align-items: center;
    justify-content: center;
}

.flex-wrap{
    flex-wrap: wrap;
}

/* Rename Alignments */

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

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

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

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

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

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

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

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

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

.flex-align-baseline{
    align-items: baseline;
}

/* gap */

.gap-1{
    gap: 1rem;
}

.gap-2{
    gap: 1.5rem;
}

.gap-3{
    gap: 3rem;
}

.gap-4{
    gap: 4rem;
}

.row-gap-1{
    row-gap:  1rem;
}

.row-gap-2{
    row-gap:  1.5rem;
}

.row-gap-3{
    row-gap:  3rem;
}

.row-gap-4{
    row-gap:  4rem;
}

.col-gap-1{
    column-gap: 1rem;
}

.col-gap-2{
    column-gap: 1.5rem;
}

.col-gap-3{
    column-gap: 3rem;
}

.col-gap-4{
    column-gap: 4rem;
}


/* Responsive Flex */

.flex-row-sm,
.flex-row-md,
.flex-row-lg{
    display: flex;
    flex-direction: row;
}

@media (max-width: 576px){
    .flex-row-sm{
        flex-direction: column;
    }
}

@media (max-width: 768px){
    .flex-row-md{
        flex-direction: column;
    }
}

@media (max-width: 992px){
    .flex-row-lg{
        flex-direction: column;
    }
}

