<commit_before>@import '~amo/css/styles';

.HeroRecommendation {
  color: $white;
  display: flex;
  // This works around a layout bug in Firefox.
  // It is currently unfixed as of 70.0 (Nightly).
  // https://github.com/mozilla/addons-frontend/issues/8426
  overflow: auto;
  padding: 24px;
  position: relative;

  @include respond-to(extraExtraLarge) {
    padding: 36px;

    @include padding-start(96px);
  }
}

.HeroRecommendation-info {
  @include margin-start(24px);

  @include respond-to(extraLarge) {
    @include margin-start(96px);
  }

  @include respond-to(extraExtraLarge) {
    @include margin-start(136px);
  }
}

$overlayShapeZIndex: 1;

.HeroRecommendation-overlayShape {
  bottom: 0;
  height: 70%;
  left: 0;
  max-height: 307px;
  position: absolute;
  z-index: $overlayShapeZIndex;

  [dir='rtl'] & {
    left: auto;
    right: 0;
    transform: scaleX(-1);
  }
}

.HeroRecommendation-image {
  height: 0;
  visibility: hidden;
  width: 0;

  @include respond-to(medium) {
    height: auto;
    visibility: visible;
    width: 100%;
  }

  @include respond-to(extraExtraLarge) {
    width: 480px;
  }
}

.HeroRecommendation-recommended {
  font-size: $font-size-s;
  letter-spacing: 0.1em;
  line-height: 1.143;
  margin: 0;
  opacity: 0.5;

  @include respond-to(medium) {
    font-size: $font-size-default;
  }

  @include respond-to(extraExtraLarge) {
    margin-top: 16px;
  }
}

.HeroRecommendation-heading,
.HeroRecommendation-heading .AddonTitle {
  color: $white;
  font-size: $font-size-l;
  line-height: 1.188;
  margin: 14px 0 0 0;

  @include respond-to(extraExtraLarge) {
    font-size: $font-size-xl;
  }

  .AddonTitle-author {
    &,
    a,
    a:link {
      color: $white;
    }
  }
}

.HeroRecommendation-body {
  font-size: $font-size-s;
  font-weight: normal;
  line-height: 1.666;
  margin: 24px 0;

  @include respond-to(medium) {
    font-size: $font-size-m;<commit_msg>Fix unbroken string issue for Primary Hero Shelf (#8523)<commit_after>@import '~amo/css/styles';

.HeroRecommendation {
  color: $white;
  display: flex;
  // This works around a layout bug in Firefox.
  // It is currently unfixed as of 70.0 (Nightly).
  // https://github.com/mozilla/addons-frontend/issues/8426
  overflow: auto;
  padding: 24px;
  position: relative;

  @include respond-to(extraExtraLarge) {
    padding: 36px;

    @include padding-start(96px);
  }
}

.HeroRecommendation-info {
  @include margin-start(24px);

  @include respond-to(extraLarge) {
    @include margin-start(96px);
  }

  @include respond-to(extraExtraLarge) {
    @include margin-start(136px);
  }
}

$overlayShapeZIndex: 1;

.HeroRecommendation-overlayShape {
  bottom: 0;
  height: 70%;
  left: 0;
  max-height: 307px;
  position: absolute;
  z-index: $overlayShapeZIndex;

  [dir='rtl'] & {
    left: auto;
    right: 0;
    transform: scaleX(-1);
  }
}

.HeroRecommendation-image {
  height: 0;
  visibility: hidden;
  width: 0;

  @include respond-to(medium) {
    height: auto;
    visibility: visible;
    width: 100%;
  }

  @include respond-to(extraExtraLarge) {
    width: 480px;
  }
}

.HeroRecommendation-recommended {
  font-size: $font-size-s;
  letter-spacing: 0.1em;
  line-height: 1.143;
  margin: 0;
  opacity: 0.5;

  @include respond-to(medium) {
    font-size: $font-size-default;
  }

  @include respond-to(extraExtraLarge) {
    margin-top: 16px;
  }
}

.HeroRecommendation-heading,
.HeroRecommendation-heading .AddonTitle {
  color: $white;
  font-size: $font-size-l;
  line-height: 1.188;
  margin: 14px 0 0 0;
  overflow-wrap: anywhere;

  @include respond-to(extraExtraLarge) {
    font-size: $font-size-xl;
  }

  .AddonTitle-author {
    &,
    a,
    a:link {
      color: $white;
    }
  }
}

.HeroRecommendation-body {
  font-size: $font-size-s;
  font-weight: normal;
  line-height: 1.666;
  margin: 24px 0;

  @include respond-to(medium) {
    font-size: $font-size-m;
{'fraction_non_alphanumeric': 0.14483111566018425, 'fraction_numerical': 0.03428863868986694, 'mean_word_length': 3.080375782881002, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3219855', 'n_tokens_mistral': 1640, 'n_tokens_neox': 1479, 'n_words': 297}