.masonry-with-columns {
  display: flex;
  flex-wrap: wrap;
flex-direction: row;
}
.masonry-with-columns div {
  height: 150px;
  line-height: 150px;
  background: #EC985A;
  color: white;
  margin: 0 1rem 1rem 0;
  text-align: center;
  font-family: system-ui;
  font-weight: 900;
  font-size: 2rem;
  flex: 1 0 auto;
  
   color: rgba(255,255,255,0);
   transition-duration: 0.5s;
   background-size: cover;
    
       
 
        
}

   .masonry-with-columns div:hover {
    color: rgba(255,255,255,1);
           
    }
       
.masonry-with-columns div:nth-child(1) {
  width: 211px;
  background-image: url(../imgs/gallerie/gallerie-1.jpg);
  background-position: center;
  background-size: cover;
}
.masonry-with-columns div:nth-child(2) {
  background-image: url(../imgs/gallerie/gallerie-2.jpg);
  width: 433px;
  background-position: center;
  background-size: cover;
}
.masonry-with-columns div:nth-child(3) {
  background-image: url(../imgs/gallerie/gallerie-3.jpg);
  background-position: center;
  background-size: cover;
  width: 327px;
}
.masonry-with-columns div:nth-child(4) {
  width: 95px;
  background-image: url(../imgs/gallerie/gallerie-4.jpg);
  background-position: center;
  background-size: cover;
}
.masonry-with-columns div:nth-child(5) {
  width: 92px;
  background-image: url(../imgs/gallerie/gallerie-5.jpg);
  background-position: center;
  background-size: cover;
}
.masonry-with-columns div:nth-child(6) {
  width: 112px;
  background-image: url(../imgs/gallerie/gallerie-6.jpg);
  background-position: center;
  background-size: cover;
}
.masonry-with-columns div:nth-child(7) {
  background-image: url(../imgs/gallerie/gallerie-7.jpg);
  background-position: center;
  background-size: cover;
  width: 167px;
}
.masonry-with-columns div:nth-child(8) {
  background-image: url(../imgs/gallerie/gallerie-8.jpg);
  background-position: center;
  background-size: cover;
  width: 315px;
}
.masonry-with-columns div:nth-child(9) {
  background-image: url(../imgs/gallerie/gallerie-9.jpg);
  background-position: center;
  background-size: cover;
  width: 268px;
}
.masonry-with-columns div:nth-child(10) {
  background-image: url(../imgs/gallerie/gallerie-10.jpg);
  background-position: center;
  background-size: cover;
  width: 198px;
}
.masonry-with-columns div:nth-child(11) {
  background-image: url(../imgs/gallerie/gallerie-11.jpg);
  background-position: center;
  background-size: cover;    
  width: 257px;
}
.masonry-with-columns div:nth-child(12) {
  background-image: url(../imgs/gallerie/gallerie-12.jpg);
  background-position: center;
  background-size: cover;
  width: 337px;
}
.masonry-with-columns div:nth-child(13) {
  background-image: url(../imgs/gallerie/gallerie-13.jpg);
  background-position: center;
  background-size: cover;
  width: 382px;
}
.masonry-with-columns div:nth-child(14) {
  background-image: url(../imgs/gallerie/gallerie-14.jpg);
  background-position: center;
  background-size: cover;
  width: 221px;
}
.masonry-with-columns div:nth-child(15) {
  background-image: url(../imgs/gallerie/gallerie-15.jpg);
  background-position: center;
  background-size: cover;
  width: 159px;
}
.masonry-with-columns div:nth-child(16) {
  width: 268px;
}
.masonry-with-columns div:nth-child(17) {
  width: 414px;
}
.masonry-with-columns div:nth-child(18) {
  width: 297px;
}
.masonry-with-columns div:nth-child(19) {
  width: 226px;
}
.masonry-with-columns div:nth-child(20) {
  width: 214px;
}
.masonry-with-columns div:nth-child(21) {
  width: 407px;
}
.masonry-with-columns div:nth-child(22) {
  width: 316px;
}
.masonry-with-columns div:nth-child(23) {
  width: 158px;
}
.masonry-with-columns div:nth-child(24) {
  width: 380px;
}
.masonry-with-columns div:nth-child(25) {
  width: 259px;
}
.masonry-with-columns div:nth-child(26) {
  width: 164px;
}
.masonry-with-columns div:nth-child(27) {
  width: 257px;
}
.masonry-with-columns div:nth-child(28) {
  width: 381px;
}
.masonry-with-columns div:nth-child(29) {
  width: 281px;
}
.masonry-with-columns div:nth-child(30) {
  width: 81px;
}
.masonry-with-columns div:nth-child(31) {
  width: 102px;
}
.masonry-with-columns div:nth-child(32) {
  width: 343px;
}
.masonry-with-columns div:nth-child(33) {
  width: 175px;
}
.masonry-with-columns div:nth-child(34) {
  width: 109px;
}
.masonry-with-columns div:nth-child(35) {
  width: 395px;
}
.masonry-with-columns div:nth-child(36) {
  width: 255px;
}