.masonry {
  margin: 1.5em auto;
  column-gap: 1.5em;
}
.container.board {max-width: 95%;}

.advert {
background: linear-gradient(135deg,  #7a7a7a 1%,#1c1c1c 100%); 
 
 color:white; 
   border-radius:10px;
  border:1px solid #999;
  margin: 0 0 .5em;
  display:inline-block;
  position: relative;
  overflow:hidden;
  width:100%;
}
.advert .elastic-video {padding-bottom: 100% !important;margin:0;border:none !important}
.advert .elastic-video iframe {border:none !important}
.advert .textwrapper {padding:.5rem;}
.advert .textwrapper p {margin:.35rem !important;}


.dark {background: linear-gradient(135deg,  #7a7a7a 1%,#1c1c1c 100%);color:white !important;}
.dark p {color:white !important;}
.blue {background: #3854d5;
background: linear-gradient(135deg,  rgba(85,146,244,1) 1%,rgba(56,84,213,1) 41%,rgba(18,23,183,1) 98%) !important;color:white; }
.red {background: #d75257;
background: linear-gradient(135deg,  rgba(223,86,129,1) 1%,rgba(218,83,105,1) 22%,rgba(209,50,52,1) 68%); color:white;
 }
.violet {background: #7c58d7;
background: linear-gradient(135deg,  rgba(112,77,188,1) 26%,rgba(128,91,173,1) 67%,rgba(133,94,147,1) 100%);color:white;
 }
.orange {background: #e7a845;
background: linear-gradient(135deg,  rgba(245,199,89,1) 0%,rgba(235,176,74,1) 8%,rgba(244,133,68,1) 42%); color:white;
 }
.green {
background: linear-gradient(135deg,  rgba(140,216,195,1) 0%,rgba(110,189,165,1) 18%,rgba(72,142,120,1) 77%); color:white;
}
.white {
background: #fff; color:black;
}
.light {
background: #efefef; color:black;
}
.advert div.teaserimg {overflow:hidden;}
.advert div.teaserimg img {transition: all 0.5s;}
.advert div.teaserimg:hover img, .advert a.extlink:hover + div.teaserimg img {transform: scale(1.1);}

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

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

/* Masonry on small screens */
@media only screen and (max-width: 767px) and (min-width: 540px) {
  .masonry {
    column-count: 2;
  }
} 
/* Masonry on very mall screens */
@media only screen and (max-width: 567px)) {
  .masonry {
    column-count: 1;
  }
}
     
 .advert a.extlink {
	 position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:2;
 }
.advert img {width:100%;}