.flex {
    display: flex;
}

/* flex wrap */ 

.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

/* flex direction  */

.row {
    flex-direction: row;
}

.column {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.column-reverse {
    flex-direction: column-reverse;
}

/* align items */

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

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

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

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

/* justify content */ 

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

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

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

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

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

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

/* mobile responsive */ 

.row-mobile {
    flex-direction: row;
}

.column-mobile {
    flex-direction: column;  
}

/* tablet responsive */ 

.row-tablet {
    flex-direction: row;  
}

.column-tablet {
    flex-direction: column;  
}

/* desktop responsive */ 

.row-desktop {
    flex-direction: row;  
}

.column-desktop {
    flex-direction: column;  
}

/* flex items */ 

.item-1 {
    flex: 0 0 100%; 
    width: 100%;
}

.item-2 {
    flex: 0 0 100%; 
    width: 100%;
}

.item-3 {
    flex: 0 0 100%; 
    width: 100%;
}

.item-4 {
    flex: 0 0 100%; 
    width: 100%;
}

.item-5 {
    flex: 0 0 100%; 
    width: 100%;
}

/* flex width */ 

.flex-5 {
    flex: 0 0 5%; 
}

.flex-10 {
    flex: 0 0 10%; 
}

.flex-15 {
    flex: 0 0 15%; 
}

.flex-20 {
    flex: 0 0 20%; 
}

.flex-25 {
    flex: 0 0 25%; 
}

.flex-30 {
    flex: 0 0 30%; 
}

.flex-35 {
    flex: 0 0 35%; 
}

.flex-40 {
    flex: 0 0 40%; 
}

.flex-45 {
    flex: 0 0 45%; 
}

.flex-50 {
    flex: 0 0 50%; 
    width: 100%; 
}

.flex-55 {
    flex: 0 0 55%; 
}

.flex-60 {
    flex: 0 0 60%; 
}

.flex-65 {
    flex: 0 0 65%; 
}

.flex-70{
    flex: 0 0 70%; 
}

.flex-75 {
    flex: 0 0 75%;
    width: 100%; 
}

.flex-80 {
    flex: 0 0 80%; 
}

.flex-85 {
    flex: 0 0 85%; 
}

.flex-90 {
    flex: 0 0 90%; 
}

.flex-95 {
    flex: 0 0 95%; 
}

.flex-100 {
    flex: 0 0 100%; 
}

.flex-shrink {
    flex-shrink: 0;
}

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

/* gap */ 

.gap-1 {
    gap: 1%; 
}

.gap-2 {
    gap: 2%; 
}

.gap-3 {
    gap: 3%; 
}

.gap-4 {
    gap: 4%; 
}

.gap-5 {
    gap: 5%; 
}

.gap-6 {
    gap: 6%; 
}

.gap-7 {
    gap: 7%; 
}

.gap-8 {
    gap: 8%; 
}

.gap-9 {
    gap: 9%; 
}

.gap-10 {
    gap: 10%; 
}

@media (min-width: 768px) {
    .row-mobile {
        flex-direction: column;
    }
    .column-mobile {
        flex-direction: row;  
    }
    .item-2 {
        flex: 0 0 50%; 
        width: 50%;
    }
    .item-3 {
        flex: 0 0 32.5%; 
        width: 32.5%;
    }
    .item-4 {
        flex: 0 0 49%; 
        width: 49%;
    }
    .item-5 {
        flex: 0 0 33.333%; 
        width: 33.333%;
    }
}

@media (min-width: 1024px) {   
    .row-tablet {
        flex-direction: column;  
    }
    .column-tablet {
        flex-direction: row;  
    }
}

@media (min-width: 1440px) {
    .item-5 {
        flex: 0 0 20%; 
        width: 20%;
    }
    .item-4 {
        flex: 0 0 24%; 
        width: 24%;
    }
    .row-desktop {
        flex-direction: column;  
    }
    .column-desktop {
        flex-direction: row;  
    }
}