/* Mobile Screen */
@media (max-width: 780px) {
    .flex-container {
        flex-wrap: wrap;
    }

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

    
    .col-1 {
        flex-basis: calc(100% * (4/12)) ;
    }
    
    .col-2 {
        flex-basis: calc(100% * (4/12)) ;
    }

    .col-3 {
        flex-basis: calc(100% * (6/12)) ;
    }

    .col-4 {
        flex-basis: calc(100% * (6/12)) ;
    }

    .col-5 {
        flex-basis: calc(100% * (6/12)) ;
    }

    .col-6 {
        flex-basis: calc(100% * (8/12)) ;
    }

    .col-7 {
        flex-basis: calc(100% * (8/12)) ;
    }

    .col-8 {
        flex-basis: calc(100% * (8/12)) ;
    }

    .col-9 {
        flex-basis: calc(100% * (9/12)) ;
    }

    .col-10 {
        flex-basis: calc(100% * (10/12)) ;
    }

    .col-11 {
        flex-basis: calc(100% * (11/12)) ;
    }

    .gap-1, .gap-2, .gap-3{
        .col-1 {
            flex-basis: calc((100% - 5%) * (4/12)) ;
        }

        .col-2 {
            flex-basis: calc((100% - 5%) * (4/12)) ;
        }

        .col-3 {
            flex-basis: calc((100% - 5%) * (6/12)) ;
        }

        .col-4 {
            flex-basis: calc((100% - 5%) * (6/12)) ;
        }

        .col-5 {
            flex-basis: calc((100% - 5%) * (6/12)) ;
        }

        .col-6 {
            flex-basis: calc(((100% - 5%) - 5%) * (8/12)) ;
        }

        .col-7 {
            flex-basis: calc((100% - 5%) * (8/12)) ;
        }

        .col-8 {
            flex-basis: calc((100% - 5%) * (8/12)) ;
        }

        .col-9 {
            flex-basis: calc((100% - 5%) * (9/12)) ;
        }

        .col-10 {
            flex-basis: calc((100% - 5%) * (10/12)) ;
        }

        .col-11 {
            flex-basis: calc((100% - 5%) * (11/12)) ;
        }
    }
}

/* Extra Small*/
@media (max-width: 600px) {
    
    .col-1 {
        flex-basis: calc(100% * (12/12)) ;
    }
    
    .col-2 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-3 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-4 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-5 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-6 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-7 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-8 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-9 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-10 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .col-11 {
        flex-basis: calc(100% * (12/12)) ;
    }

    .gap-1, .gap-2, .gap-3 {
        .col-1 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-2 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-3 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-4 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-5 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-6 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-7 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-8 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-9 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-10 {
            flex-basis: calc(100% * (12/12)) ;
        }

        .col-11 {
            flex-basis: calc(100% * (12/12)) ;
        }
    }
}