Media Query help, Reducing image columns with a media query Options

[Binaary]

After a few months of not touching html and having some spare time on my hands I've decided to improve my knowledge. I've started following a tutorial on making a gallery with different image heights, however trying to make it responsive is becoming a challenge.

This is the video that I've been following: https://www.youtube.com/watch?v=KI3h2RIMW2E


HTML

CODE

    <div class="container">
        <div class="m-block"><img src="images/pic1.png"></div>
        <div class="m-block"><img src="images/pic2.png"></div>
        <div class="m-block"><img src="images/pic3.png"></div>
        <div class="m-block"><img src="images/pic4.png"></div>
        <div class="m-block"><img src="images/pic5.png"></div>
        <div class="m-block"><img src="images/pic6.png"></div>
        <div class="m-block"><img src="images/pic7.png"></div>
        <div class="m-block"><img src="images/pic9.png"></div>
        <div class="m-block"><img src="images/pic10.png"></div>
        <div class="m-block"><img src="images/pic3.png"></div>    
    </div>    

CSS and @media

CODE

.container{
    column-count:3;
    column-gap:10px;
    max-width:1800px;
    margin: 0 auto;
    padding-left: 10%;
    padding-right: 10%;
}

.m-block img{
    width: 100%;
    cursor:pointer;
    padding: 10px;
    display:block;
    height:auto;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px){
    .container{
        column-count: 3;
    }
}    

@media screen and (max-width: 640px){
    .container{
        column-count: 2;
    }
}    

@media screen and (max-width: 375px){
    .container{
        column-count:3;
    }
}    

Full width


Mobile



Any help as to why this isn't working would be greatly appreciated!