.teaser-stacklist {
  $block: unquote("#{&}");
  margin: 0;
  padding: 0;
  &__item {
    display: block;
    width: 100%;
    list-style: none;
    vertical-align: top;
    overflow: hidden;
    align-items: center;
    margin: 0 0 1em;
  }
  &__anchor {
    display: inline-block;
  }
  &__images {
    overflow: hidden;
    position: relative;
    display: inline-block;
  }
  &__duration {
    color: #000;
    display: inline-block;
    margin: 0;
    padding: 0 $spacer-small;
    font-size: $font-small;
  }
  &__thumbnail {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left top;
  }
  &__container {
    margin: $spacer-small 0;
    position: relative;
    @media screen and (min-width: 45.000em) {
      padding: 1em;
    }
    @include for-size(tablet-landscape-up)  {
      margin: 1em 0 0;
    }
    .section__title {
      font-size: $font-small;
    }
  }
  &__elem-audio {
    margin: 0 0 $spacer-small;
    padding: 1em;
    @include for-size(tablet-landscape-up)  {
      margin: 0 0 1em;
    }
  }
  &__title {
    color: #000;
    display: inline-block;
    font-size: $font-x-medium;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    @media screen and (min-width: 65.313em) {
      font-size: $font-medium;
    }
  }
  &__subtitle {
    color: #000;
    font-size: $font-x-small;
    overflow: hidden;
    margin: 0;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  //WATCH HOMEPAGE
  &--watch {
    #{$block}__images {
      display: block;
      @media screen and (min-width: 62.000em)  {
        max-height: 422px;
      }
      @media screen and (min-width: 72.188em) {
        width: 750px;
      }
    }
    #{$block}__container {
      background: $color-aqua;
      padding: 1em;
      @each $name, $color in $color_loop {
        &--#{$name} {
          background: $color;
        }
      }
    }
    #{$block}__title {
      @include for-size(tablet-landscape-up) {
        font-size: $font-xx-large;
      }
    }
    #{$block}__anchor {
      vertical-align: middle;
    }
    #{$block}__duration {
      vertical-align: sub;
    }
    iframe,video {
      @include for-size(tablet-landscape-up) {
        height: 422px;
        max-height: 422px;
      }
    }
  }

  //LISTEN HOMEPAGE
  &--listen {
    #{$block}__item {
      &--inner {
        background-color: $color-light-gray;
        padding: 1em;
        @media screen and (min-width: 45.000em) {
          display: grid;
          grid-template-columns: 175px 525px;
        }
        @include for-size(tablet-landscape-up) {
          padding: 1.5em;
        }
      }
    }
    #{$block}__anchor {
      display: block;
    }
    #{$block}__images {
      @media screen and (min-width: 62.000em) {
        width: 175px;
        height: 175px;
      }
      #{$block}__anchor {
        @media screen and (min-width: 62.000em) {
          width: 175px;
          height: 175px;
        }
      }
    }
    #{$block}__container {
      margin: 0 0 $spacer-small;
      @media screen and (min-width: 45.000em) {
        padding: 0 1em;
      }
      .section__title {
        color: $color-light-red;
      }
    }
    #{$block}__title {
      @include for-size(tablet-landscape-up) {
        font-size: $font-xx-large;
      }
    }
    #{$block}__elem-audio {
      background: $color-light-red;
      @each $name, $color in $color_loop {
        &--#{$name} {
          background: $color;
          .teaser-breadcrumb-list__anchor {
            color: $color;
          }
        }
      }
    }
  }
}
