.quote--s {
  align-items: flex-start;
  display: flex;

  .quote {
    &__media {
      width: grid-columns(1, 6);
    }

    &__content {
      margin-left: auto;
      width: grid-columns(5, 6);
    }

    &__text {
      @include font-style('title--xs', 'title--s');
      margin: 0;
    }

    &__author {
      @include font-style('body--l');
      margin: $spacing--xs 0 0;
    }
  }
}

// viewport l
@include viewport--l {
  .quote--s .quote {
    &__media {
      width: grid-columns(1, 7);
    }

    &__content {
      width: grid-columns(6, 7);
    }

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

.quote--xs {
  img {
    width: 60px;
  }
}

@include viewport--l {
  .quote--xs {
    padding: $spacing--l;
  }
}