.page .wp-block-yasothon-yasothon-columns {

    margin-bottom: 50px;

    &.has-1-columns {

        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    &.has-2-columns {

        display: grid;
        grid-column-gap: 40px;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    &.has-3-columns {

        display: grid;
        grid-column-gap: 30px;
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }

    &.has-4-columns {

        display: grid;
        grid-column-gap: 25px;
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    &.has-3-1-columns {

        display: grid;
        grid-column-gap: 50px;
        -ms-grid-columns: 0.75fr 0.25fr;
        grid-template-columns: 0.75fr 0.25fr;
    }

    &.has-1-3-columns {

        display: grid;
        grid-column-gap: 50px;
        -ms-grid-columns: 0.25fr  0.75fr ;
        grid-template-columns: 0.25fr  0.75fr ;
    }

    &.has-1-2-1-columns {

        display: grid;
        grid-column-gap: 30px;
        -ms-grid-columns: 0.25fr 0.5fr 0.25fr;
        grid-template-columns: 0.25fr 0.5fr 0.25fr;
    }
}

@media only screen and (min-width: 320px) {
    
    .page .wp-block-yasothon-yasothon-columns {

        margin-bottom: 30px;
        
        &.has-2-columns,
        &.has-3-columns,
        &.has-4-columns,
        &.has-3-1-columns,
        &.has-1-3-columns,
        &.has-1-2-1-columns {
            display: block;
        }
    }
}

@media only screen and (min-width: 1168px) {
    
    .page .wp-block-yasothon-yasothon-columns {
        
        margin-bottom: 50px;

        &.has-2-columns,
        &.has-3-columns,
        &.has-4-columns,
        &.has-3-1-columns,
        &.has-1-3-columns,
        &.has-1-2-1-columns {
            display: grid;
        }
    }

}