$spacer: 2rem;
.video-containers {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: $spacer;
  padding: $spacer;   
	
  &:hover {
    cursor: pointer;
    .vplay-button {
      filter: none;
    }
  }

  
}
.video-containers .image-container {
    width: 100%; 
	position: relative;
	overflow: hidden;
    img {
      vertical-align: middle;
      width: 100%;
      height: auto;   
	  object-fit: cover;
    }
}
.vplay-button {
  width: 60px;
  height: 42px; 
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
 

  background-color: transparent;
  /* youtube's actual play button svg */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
  filter: grayscale(100%);
  transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
  border: none;
}
.video-containers .image-container:hover .vplay-button {
    filter: none;
}
.bgload-lazy{ background-image:none;  }