.masonry {
  max-width: 100%;
  column-count: 4;
  column-gap: 15px;
  column-fill: balance;
}
/* nejde ie 11
 .flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
 
 
}*/

.flex 
{
 
	display: flex;
	/*flex-wrap: wrap;*/
flex-flow: row wrap;
	/*flex-direction: row;*/
	/*width: 100%;*/
	align-content: flex-start ;
justify-content: flex-start ;
margin-right:-7.5px;
 margin-left:-7.5px;
}

.brick 
{ /* Masonry bricks or child elements */
	display: block;
	position:relative;
 margin-bottom: 15px ;
	width: 100%;
	overflow: hidden;

	
}
.brick2 
{ /* Masonry bricks or child elements */
  position:relative; 
 
	/*flex:1 0 20%;*/
flex-basis: 25%;
	overflow: hidden;
	
	

box-sizing: border-box;
}

 
/* Masonry on large screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 4;
  }
.brick2
{
flex-basis: 25%;
}
 
}

/* Masonry on medium-sized screens */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
   column-count: 3;
  }
 .brick2
{
flex-basis: 33.33%;
}
}

/* Masonry on small screens */
@media only screen and (max-width: 767px)   {
  .masonry {
    column-count: 2;
  }
 .brick2
{
 flex-basis: 50%;
}
}