Masonry layout responsive

<style>
.recenze {
padding: 1rem;
}
.recenze img {
width: 100%;
margin-bottom: 1rem;
}

@media only screen and (max-width: 479px){
.recenze {
column-count: 1;
}
}
@media only screen and (min-width:480px) and (max-width: 991px){
.recenze {
column-count: 2;
}
}
@media only screen and (min-width: 992px){
.recenze {
column-count: 3;
}
}

</style>

<div class="recenze">
<div><img src="https://source.unsplash.com/200x330"></div>
<div><img src="https://source.unsplash.com/300x380"></div>
<div><img src="https://source.unsplash.com/300x200"></div>
<div><img src="https://source.unsplash.com/200x300"></div>
<div><img src="https://source.unsplash.com/200x400"></div>
<div><img src="https://source.unsplash.com/280x350"></div>
<div><img src="https://source.unsplash.com/200x360"></div>
<div><img src="https://source.unsplash.com/200x300"></div>
<div><img src="https://source.unsplash.com/250x320"></div>
<div><img src="https://source.unsplash.com/200x200"></div>
<div><img src="https://source.unsplash.com/200x330"></div>
<div><img src="https://source.unsplash.com/200x340"></div>
<div><img src="https://source.unsplash.com/200x350"></div>
<div><img src="https://source.unsplash.com/200x250"></div>
</div>