.teaser-grid {
  $block: unquote("#{&}");
  margin: 0;
  padding: 0;
  &__item {
    list-style: none;
    vertical-align: top;
    margin: 0 0 2em;
    @include for-size(tablet-portrait-up) {
      display: inline-block;
      margin: 0 1em 2em 1em;
      width: 25%;
    }
    @include for-size(tablet-landscape-up) {
      width: 22.5%;
    }
  }
  &__images {
    background-color: $color-gray-light;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    @include for-size(tablet-landscape-up) {
      height: 175px;
    }
  }
  &__thumbnail {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left top;
  }
  &__title {
    font-size: $font-small;
    line-height: 1;
    margin: $spacer-half 0;
    text-transform: uppercase;
    word-wrap: break-word;
    word-break: initial;
  }
  &__heading {
    font-size: $font-medium;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    &:focus, &:hover {
      text-decoration:underline;
      color: #000;
    }
  }
  &__subtitle {
    margin: 0 0 $spacer-half;
  }

  &--latest {
    overflow: auto;
    #{$block}__item {
      margin: 0 0 2em 0;
      display: inline-block;
      @include for-size(tablet-portrait-up) {
        margin: 0 1em 2em 0;
        width: 34%;
      }
    }
  }
  &--hero {
    color: #fff;
    #{$block}__item {
      margin: 0;
      width: 100%;
    }
    .comments-counter {
      background: url('/static/img/icons/ninyampinga/iconsSprite.png') no-repeat 0 100%/100%;
    }
  }
  &--primary {
    #{$block}__item {
      &:nth-child(1) {
        @include for-size(tablet-portrait-up) {
          width: 66%;
          float: left;
        }
        #{$block}__images {
          @include for-size(tablet-portrait-up) {
            height: 361.69px;
          }
        }
      }
      &:nth-child(2),
      &:nth-child(3) {
        @include for-size(tablet-portrait-up) {
          width: 30%;
          float: right;
        }
        #{$block}__images {
          width: auto;
          margin: 0;
        }
        #{$block}__paragraph {
          height: 0;
          overflow: hidden;
          display: none;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
