.contents-preview-header {
  @include align-center-vertical;
  position: absolute;
  width: 100vw;
  height: 60px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 44%, rgba(0, 0, 0, 0.4));
  z-index: 1;

  @mixin type {
    @include size(19px);
    margin-left: 25px;
  }

  &__type--image {
    @include image;
    @include type;
  }

  &__type--video {
    @include video;
    @include type;
  }

  &__type--playlist {
    @include playlist;
    @include type;
  }

  &__name{
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: #ffffff;
    margin-left: 17px;
  }

  &__close{
    @include bounded-cross-button;
    @include size(30px);
    position: absolute;
    right: 15px;
    cursor: pointer;
  }
}

.contents-preview-detail{
  &--image {
    @include thumbnail;
    height: 100vh;
    width: 100vw;
  }

  &--video {
    background-color: black;
    video {
      width: 100vw;
      height: 100vh;
    }
  }
}