.carousel--quote {
  padding-bottom: $spacing--l;
  padding-top: $spacing--m;

  &.slick-dotted {
    padding-bottom: $baseline * 11.5;
  }

  .banner__wrapper:focus,
  .banner__slide:focus {
    outline: 0;
  }

  .quotes {
    margin-bottom: $spacing--s;
    width: 94px;

    &--s {
      width: 70px;
    }
  }

  .content-block {
    &__description,
    &__author {
      margin-bottom: 0;
      margin-top: $spacing--s;
    }

    &__description {
      @include font-style(
        'title--s',
        $carousel-quote-description-font-style--l
      );
    }

    &__author {
      @include font-style(
        $carousel-quote-author-font-style,
        $carousel-quote-author-font-style--l
      );
    }
  }

  .slick-dots {
    bottom: 50px;
  }

  &.slick-slider {
    -khtml-user-select: text;
    user-select: text;
  }
}

// viewport l
@include viewport--l {
  .carousel--quote {
    padding-bottom: $spacing--xxl;
    padding-top: $spacing--xxl;

    .banner__wrapper {
      min-height: unset;
    }

    .slick-list {
      overflow: initial;
    }

    .media-block {
      align-items: flex-start;
      margin-left: 0;
      width: grid-columns(4, 12);
      justify-content: space-between;

      img {
        position: relative;
      }
    }

    .quotes {
      bottom: inherit;
      margin: 0 auto;
      max-width: 268px;
      position: inherit;
      width: auto;

      &--s {
        margin: 0;
        margin-top: $baseline * -7;
        position: relative;
        width: grid-columns(2, 4);
      }
    }

    .content-block {
      margin-left: auto;
      width: grid-columns(8, 12);

      &__description {
        margin-top: 0;
      }

      &__author {
        margin-top: $spacing--m;
      }

      .button {
        margin-top: $spacing--l;
      }
    }
  }
}