multiple scrollable grid class seems not working

Goal:
I would like to have 3 different scrollable grid with different classes in a same page

Things I've implemented
1. Following David guide I've successfully created 3 scrollable grid classes as below

/*GB Scrollable Grid*/
@media(max-width: 480px) {
    .gb-grid-wrapper.scrollable {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable .gb-grid-column {
        flex: 1 0 40%;
        scroll-snap-align: start;
    }
}

@media (min-width: 481px) and (max-width: 1023px) {
    .gb-grid-wrapper.scrollable {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable .gb-grid-column {
        flex: 1 0 35%;
        scroll-snap-align: start;
    }
}

/*GB Scrollable1 Grid*/
@media(max-width: 480px) {
    .gb-grid-wrapper.scrollable1 {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable1 .gb-grid-column {
        flex: 1 0 55%;
        scroll-snap-align: start;
    }
}

@media (min-width: 481px) and (max-width: 1023px) {
    .gb-grid-wrapper.scrollable1 {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable1 .gb-grid-column {
        flex: 1 0 37%;
        scroll-snap-align: start;
    }

/*GB Scrollable2 Grid*/
@media(max-width: 480px) {
    .gb-grid-wrapper.scrollable2 {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable2 .gb-grid-column {
        flex: 1 0 37%;
        scroll-snap-align: start;
    }
}

@media (min-width: 481px) and (max-width: 1023px) {
    .gb-grid-wrapper.scrollable2 {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: mandatory;
    }
    .gb-grid-wrapper.scrollable2 .gb-grid-column {
        flex: 1 0 29%;
        scroll-snap-align: start;
    }

2. I then use the grid on this test page

Issue I faced
I couldnt scroll the item in mobile and tablet with Grid Class of - scrollable2.

Could you please kindly assist me on how to fix this?

Thanks

Melvin