:root {
  --video-border-color: burlywood;
  --video-background-color: antiquewhite;
}
  .video-box {
      border:2px solid var(--video-border-color);
      max-width:560px;
      margin:auto;
      box-shadow:1em 1em 0 #d2d1c8;
      margin-bottom: 2em;
      color: chocolate;
    }

  .video-box:nth-child(even){
    transform: rotate(-1deg);
  }

  .video-box:nth-child(odd){
    transform: rotate(1deg);
  }

  .video-box:nth-child(5){
    transform: rotate(3deg);
  }


  .video-box img {
    max-width: 100%;
  }

  .video-box .media {
    line-height: 0;
  }

  .metadata{
    display: flex;
    flex-direction: column;
    background-color: var(--video-background-color);
    font-size:0.9rem;
  }


  .title{
    margin-top:0;
    border-top: 2px solid var(--video-border-color);
    padding:0.5em;
    font-weight:700;
    font-size:1.3rem;
  }

  .footer{
    margin-top:0;
    border-top: 2px solid var(--video-border-color);
    display: flex;
    justify-content: space-between;
  }

  .channel{
    border-right: 2px solid var(--video-border-color);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.2em;
    display: inline-block;
    padding-bottom: 0.2em;
  }

  .date {
    float:right;
    border-left: 2px solid var(--video-border-color);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.2em;
    display: inline-block;
    padding-bottom: 0.2em;
  }

  .description{
    padding: 1em;
    display: block;
    /*transition: height 0.5s linear;*/
    overflow: hidden;
    border-top: 2px solid var(--video-border-color);
  }

  .collapsed {
    border-top: 0px;
    /*transform:scaleY(0);*/
    height: 0;
    padding:0;
  }

  .descr_button {
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
  }

  .descr_button a {
    color:inherit;
    text-decoration: inherit;
  }

  .descr_button a:before {
    content:'↕';
    vertical-align: sub;
  }

  .descr_button:hover {
    box-shadow: inset 2px 2px 0px #95948c; 
  }

  .play-icon {
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) scale(.5);
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
      border-left: 18px solid hsla(0,0%,100%,.95);
  }

  .video-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
  }
    .video-thumbnail {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: #ececec;
    transition: filter .2s ease;
  }
    
.video-thumbnail-duration-overlay {
  display: inline-block;
  background-color: var(--video-background-color);
  color: chocolate;
  font-size: 14px;
  line-height: 1.1;
  z-index: 10;
  position: absolute;
  padding: 1px 3px 1px 3px;
  right: 5px;
  bottom: 5px;
  border: 2px solid var(--video-border-color);
  }

  .play-overlay {
    transition: all .2s ease;
    position: absolute;
    right: 0;
    bottom: 0;
    width: inherit;
    height: inherit;
    opacity: 0;
    background-color: rgba(0,0,0,.3);
  }

.video-thumbnail:hover {
  text-decoration:none!important
}
.video-thumbnail:hover .play-overlay {
opacity:1
}
.video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1)
}