@media screen and (max-width: 1150px) {
    .col1 {
        background-color: #E4F4FF;
    }

    .col2 {
        background-color: #F4F9FF;
    }

    .col3 {
        background-color: #F4F9FF;
    }

    .col4 {
        background-color: #E4F4FF;
    }

    .col5 {
        background-color: #E4F4FF;
    }

    .col6 {
        background-color: #F4F9FF;
    }

    .col7 {
        background-color: #F4F9FF;
    }

    .col8 {
        background-color: #E4F4FF;
    }

    .col9 {
        background-color: #E4F4FF;
    }

    .col-extra {
        background-color: #F4F9FF;
    }
}

@media screen and (max-width: 800px) {
    .col1 {
        background-color: #E4F4FF;
    }

    .col2 {
        background-color: #F4F9FF;
    }

    .col3 {
        background-color: #E4F4FF;
    }

    .col4 {
        background-color: #F4F9FF;
    }

    .col5 {
        background-color: #E4F4FF;
    }

    .col6 {
        background-color: #F4F9FF;
    }

    .col7 {
        background-color: #E4F4FF;
    }

    .col8 {
        background-color: #F4F9FF;
    }

    .col9 {
        background-color: #E4F4FF;
    }

    .col-extra {
        background-color: #F4F9FF;
    }
}