<commit_before>// Figure
//
// A figure block usually contains an image with a title and a description.
//
// .-left    - Show figure's media to the left of the description.
// .-left.-center - Show a figure's media to the left of the description, with the text vertically centered.
// .-right   - Show figure's media to the right of the description.
// .-medium  - Set figure's media to a fixed "medium" size.
//
// Markup:
//   <article class="figure {{modifier_class}}">
//     <div class="figure__media">
//       <img alt="kitten overlords" src="/styleguide/assets/placeholder.jpg" />
//     </div>
//     <div class="figure__body">
//       <b>Teen Vogue</b> featured Comeback Clothes as one of the ways
//       fashion brands like H&amp;M are taking eco-chic to the next level.
//     </div>
//   </article>
//
// Styleguide Figure
.figure {
  @include clearfix;
  width: 100%;
  text-align: center;

  // Add extra bottom margin on tiny screens
  @include media($mobile) {
    margin-bottom: ($base-spacing * 2);
  }

  &.-left {
    text-align: left;

    > .figure__media {
      float: left;
      padding-right: gutter();
      margin: 0;
    }

    > .figure__body {
      overflow: hidden;
    }
  }

  // @NOTE: This modifier only pairs with `.left`!
  &.-center {
    display: table;

    // We use `table-cell` display property to let us vertically
    // align the contents of the figure.
    .figure__body, .figure__media {
      display: table-cell;
      vertical-align: middle;
    }

    // Remove `max-width` rule from images, because otherwise
    // the media table-cell just collapses!
    .figure__media > img {
      max-width: none;
    }

    // Hack to force the body to take up all of the space
    // in the table that the `.figure__media` does not.
    .figure__body {
      width: 100%;
    }
  }

  &.-right {
    text-align: left;

    > .figure__media {
      float: right;
      padding-left: gutter();
      margin: 0;
    }

    > .figure__body {
      overflow: hidden;
    }
  }

  &.-medium {
    > .figure__media {
      width: 75px;

      @include media($medium) {
        width: 150px;
      }

      img {
        width: 100%;
      }
    }
  }
}

.figure__media {
  text-align: center;
  margin: 0 auto gutter() / 2;

  img {
    margin: 0 auto;
  }
}

.figure__body {
  // Paragraphs should have less spacing in figures
  p + p {
    margin-top: ($base-spacing / 2);
  }
}

<commit_msg>Add tinted modifier and switch padding to margins.<commit_after>// Figure
//
// A figure block usually contains an image with a title and a description.
//
// .-left    - Show figure's media to the left of the description.
// .-left.-center - Show a figure's media to the left of the description, with the text vertically centered.
// .-right   - Show figure's media to the right of the description.
// .-medium  - Set figure's media to a fixed "medium" size.
//
// Markup:
//   <article class="figure {{modifier_class}}">
//     <div class="figure__media">
//       <img alt="kitten overlords" src="/styleguide/assets/placeholder.jpg" />
//     </div>
//     <div class="figure__body">
//       <b>Teen Vogue</b> featured Comeback Clothes as one of the ways
//       fashion brands like H&amp;M are taking eco-chic to the next level.
//     </div>
//   </article>
//
// Styleguide Figure
.figure {
  @include clearfix;
  width: 100%;
  text-align: center;

  // Add extra bottom margin on tiny screens
  @include media($mobile) {
    margin-bottom: ($base-spacing * 2);
  }

  &.-left {
    text-align: left;

    > .figure__media {
      float: left;
      margin-right: gutter();
      margin-bottom: 0;
    }

    > .figure__body {
      overflow: hidden;
    }
  }

  // @NOTE: This modifier only pairs with `.left`!
  &.-center {
    display: table;

    // We use `table-cell` display property to let us vertically
    // align the contents of the figure.
    .figure__body, .figure__media {
      display: table-cell;
      vertical-align: middle;
    }

    // Remove `max-width` rule from images, because otherwise
    // the media table-cell just collapses!
    .figure__media > img {
      max-width: none;
    }

    // Hack to force the body to take up all of the space
    // in the table that the `.figure__media` does not.
    .figure__body {
      width: 100%;
    }
  }

  &.-right {
    text-align: left;

    > .figure__media {
      float: right;
      margin-left: gutter();
      margin-bottom: 0;
    }

    > .figure__body {
      overflow: hidden;
    }
  }

  &.-medium {
    > .figure__media {
      width: 75px;

      @include media($medium) {
        width: 150px;
      }

      img {
        width: 100%;
      }
    }
  }

  &.-tinted {
    border-radius: $lg-border-radius;
    background: $off-white;
    overflow: hidden;

    > .figure__body {
      margin: gutter();
    }
  }
}

.figure__media {
  text-align: center;
  margin: 0 auto gutter() / 2;

  img {
    margin: 0 auto;
  }
}

.figure__body {
  // Paragraphs should have less spacing in figures
  p + p {
    margin-top: ($base-spacing / 2);
  }
}


{'fraction_non_alphanumeric': 0.1324945940632986, 'fraction_numerical': 0.008256339689404365, 'mean_word_length': 2.0521895620875825, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 34, 'https://': 0, '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': '5294275', 'n_tokens_mistral': 1723, 'n_tokens_neox': 1621, 'n_words': 515}