.asset-preview {
  position: relative;
}

.asset-preview__blocked {
  box-sizing: border-box;
  background: black;
  color: white;
  height: 80%;
  padding: 5px;
  //remove margin-bottom after mystery 5px on wrapper is gone.
  margin-bottom: 5px;
}

.asset-preview__image {
  width  : 100%;
  padding: 0;
  margin : 0;
}

.asset-preview__video {
  cursor: pointer;
  background-color: #ffffff;
  width: 100%;
  position: relative;
}

h3.asset-preview__title {
  margin: 0;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 1em;
  max-height: 2em;
}

.asset-preview__play-wrapper {
  border: 0px;
  padding: 0px;
  margin: auto;
  position: relative;
}

.asset-preview__play-overlay {
  padding: 0;
  border: 0;
  position: absolute;
  opacity: 0.80;
  height: 25%;
  top: 37.5%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  margin: 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='black' stroke-width='2' fill='black' fill-rule='evenodd' stroke-linejoin='round'%3E %3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E %3Cg stroke='white' stroke-width='1' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='25 19 42 30 25 41'/%3E   %3C/g%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.asset-preview__play-wrapper:hover .asset-preview__play-overlay {
  opacity: 0.2;
}