<commit_before>/* This section includes re-usable layout/grid elements */

// Full width centered page wrapper. Resizes fluidly from $max-width as viewport width decreases.
//
// .wallpaper - Full width "banners" for page designs. Has style overrides for text.
//
// Styleguide 3.1.1 - Full-width Container
.full-width {
  width: 100%;

  &.wallpaper {
    background: $off-white;
    background-size: cover;
    padding: 4rem 1rem 3rem;
    @include box-sizing(border-box);
    @include respond-to(widescreens_and_tablets) {
      padding: 10rem 1rem 9rem;
    }

    .page-width.with-copy {
      color: #fff;
      text-align: center;

      p {
        color: #fff;
        @include respond-to(widescreens_and_tablets) {
          font-size: 1.25rem;
        }
      }
    }
  }
}

// Container for page sections. Fills viewport up until $max-width - 100.
//
// Styleguide 3.1.2 - Page-width Container
.page-width {
  margin: 0 auto;
  @include flex-width;
  @include box-sizing(border-box);
}

// 12-column grid for layout. Columns have 2% padding and 1% gutters.
//
// - .span_X - Spans X (1-12) columns on tablet/desktop. Defaults to single column on mobile.
// - .always_span_X - Spans X (1-12) columns across all devices.
//
// Styleguide 3.2.1 - Columns
.column {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  padding: 0 2%;
  @include box-sizing(border-box);

  img {
    max-width: 100%;
  }

  &:first-child { 
    margin-left: 0; 
  }
}

.always_span_1 { width: 7.41666666667%; margin-left: 1%; }
.always_span_2 { width: 15.8333333333%; margin-left: 1%; }
.always_span_3 { width: 24.25%; margin-left: 1%; }
.always_span_4 { width: 32.6666666667%; margin-left: 1%; }
.always_span_5 { width: 41.0833333333; margin-left: 1%; }
.always_span_6 { width: 49.5%; margin-left: 1%; }
.always_span_7 { width: 57.9166666667%; margin-left: 1%; }
.always_span_8 { width: 66.3333333333%; margin-left: 1%; }
.always_span_9 { width: 74.75%; margin-left: 1%; }
.always_span_10 { width: 83.166666667%; margin-left: 1%; }
.always_span_11 { width: 91.583333333%; margin-left: 1%; }
.always_span_12 { width: 100%; margin-left: 1%; }

// on tablet/desktop, apply column widths based on grid
@include respond-to(widescreens_and_tablets) {
  .column {
    margin-left: 1%;

    &:first-child { 
      margin-left: 0; 
    }
  }

  .row {
    margin-bottom: 1%;

    &:first-child { 
      margin-top: 1%; 
    }
  }

  .span_1 { width: 7.41666666667%; }
  .span_2 { width: 15.8333333333%; }
  .span_3 { width: 24.25%; }
  .span_4 { width: 32.6666666667%; }
  .span_5 { width: 41.0833333333; }
  .span_6 { width: 49.5%; }
  .span_7 { width: 57.9166666667%; }
  .span_8 { width: 66.3333333333%; }
  .span_9 { width: 74.75%; }
  .span_10 { width: 83.166666667%; }
  .span_11 { width: 91.583333333%; }
  .span_12 { width: 100%; }
}

// Rows for grid layout.
//
// .section - applies a larger margin for visual distinction between sections
//
// Styleguide 3.2.2 - Rows
.row {
  clear: both;
  display: block;
  overflow: hidden;

  &.section {
    margin-bottom: 1rem;
    @include respond-to(widescreens_and_tablets) {
      margin-bottom: 3rem;
    }

    &:first-child {
      margin-top: 2rem;
      @include respond-to(widescreens_and_tablets) {
        margin-top: 4rem;
      }
    }
  }
}

// An aside is used for content that floats outside the normal flow, such as a pullquote
// or sidebar. Use in conjunction with `.span-X` to set width.
//
// .right - Floats the pullquote to the right (on wider screens).
// .left - Floats the pullquote to the left (on wider screens).
//
// Styleguide 3.3.1 - Aside
.aside {
  max-width: 620px;
  font-weight: 400;
  margin: 1em auto;
  padding: 2%;

  @include respond-to(widescreens_and_tablets) {
    &.right {
      float: right;
      text-align: right;
      margin: 1.6rem 0 1.6rem 1rem;
    }

    &.left {
      float: left;
      margin: 1.6rem 1rem 1.6rem 0;
    }
  }
}

// The 'media' interface pattern is used for components made up of a left- or
// right-aligned image alongside textual content. Blog comments, a news feed,
// or a list of related articles are all good examples of this pattern.
//
// .right - alternate apperance with media element right aligned.
//
// Styleguide 3.3.2 - Media

.media {
  margin: 1rem;
  overflow: hidden;

  &.right {
    .img {
      float: right;
      margin-left: 1rem;
    }
  }
  
  .media-content {
    overflow: hidden;
  }

  .img {
    float: left;
    margin-right: 1rem;

    img {
      display: block;
    }
  }<commit_msg>Moves generic class to HTML element<commit_after>/* This section includes re-usable layout/grid elements */

// Full width centered page wrapper. Resizes fluidly from $max-width as viewport width decreases.
//
// .wallpaper - Full width "banners" for page designs. Has style overrides for text.
//
// Styleguide 3.1.1 - Full-width Container
.full-width {
  width: 100%;

  &.wallpaper {
    background: $off-white;
    background-size: cover;
    padding: 4rem 1rem 3rem;
    @include box-sizing(border-box);
    @include respond-to(widescreens_and_tablets) {
      padding: 10rem 1rem 9rem;
    }

    .page-width.with-copy {
      color: #fff;
      text-align: center;

      p {
        color: #fff;
        @include respond-to(widescreens_and_tablets) {
          font-size: 1.25rem;
        }
      }
    }
  }
}

// Container for page sections. Fills viewport up until $max-width - 100.
//
// Styleguide 3.1.2 - Page-width Container
.page-width {
  margin: 0 auto;
  @include flex-width;
  @include box-sizing(border-box);
}

// 12-column grid for layout. Columns have 2% padding and 1% gutters.
//
// - .span_X - Spans X (1-12) columns on tablet/desktop. Defaults to single column on mobile.
// - .always_span_X - Spans X (1-12) columns across all devices.
//
// Styleguide 3.2.1 - Columns
.column {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  padding: 0 2%;
  @include box-sizing(border-box);

  img {
    max-width: 100%;
  }

  &:first-child {
    margin-left: 0;
  }
}

.always_span_1 { width: 7.41666666667%; margin-left: 1%; }
.always_span_2 { width: 15.8333333333%; margin-left: 1%; }
.always_span_3 { width: 24.25%; margin-left: 1%; }
.always_span_4 { width: 32.6666666667%; margin-left: 1%; }
.always_span_5 { width: 41.0833333333; margin-left: 1%; }
.always_span_6 { width: 49.5%; margin-left: 1%; }
.always_span_7 { width: 57.9166666667%; margin-left: 1%; }
.always_span_8 { width: 66.3333333333%; margin-left: 1%; }
.always_span_9 { width: 74.75%; margin-left: 1%; }
.always_span_10 { width: 83.166666667%; margin-left: 1%; }
.always_span_11 { width: 91.583333333%; margin-left: 1%; }
.always_span_12 { width: 100%; margin-left: 1%; }

// on tablet/desktop, apply column widths based on grid
@include respond-to(widescreens_and_tablets) {
  .column {
    margin-left: 1%;

    &:first-child {
      margin-left: 0;
    }
  }

  .row {
    margin-bottom: 1%;

    &:first-child {
      margin-top: 1%;
    }
  }

  .span_1 { width: 7.41666666667%; }
  .span_2 { width: 15.8333333333%; }
  .span_3 { width: 24.25%; }
  .span_4 { width: 32.6666666667%; }
  .span_5 { width: 41.0833333333; }
  .span_6 { width: 49.5%; }
  .span_7 { width: 57.9166666667%; }
  .span_8 { width: 66.3333333333%; }
  .span_9 { width: 74.75%; }
  .span_10 { width: 83.166666667%; }
  .span_11 { width: 91.583333333%; }
  .span_12 { width: 100%; }
}

// Rows for grid layout.
//
// .section - applies a larger margin for visual distinction between sections
//
// Styleguide 3.2.2 - Rows
section.row {
  clear: both;
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;

  @include respond-to(widescreens_and_tablets) {
    margin-bottom: 3rem;
  }

  &:first-child {
    margin-top: 2rem;
    @include respond-to(widescreens_and_tablets) {
      margin-top: 4rem;
    }
  }
}

// An aside is used for content that floats outside the normal flow, such as a pullquote
// or sidebar. Use in conjunction with `.span-X` to set width.
//
// .right - Floats the pullquote to the right (on wider screens).
// .left - Floats the pullquote to the left (on wider screens).
//
// Styleguide 3.3.1 - Aside
.aside {
  max-width: 620px;
  font-weight: 400;
  margin: 1em auto;
  padding: 2%;

  @include respond-to(widescreens_and_tablets) {
    &.right {
      float: right;
      text-align: right;
      margin: 1.6rem 0 1.6rem 1rem;
    }

    &.left {
      float: left;
      margin: 1.6rem 1rem 1.6rem 0;
    }
  }
}

// The 'media' interface pattern is used for components made up of a left- or
// right-aligned image alongside textual content. Blog comments, a news feed,
// or a list of related articles are all good examples of this pattern.
//
// .right - alternate apperance with media element right aligned.
//
// Styleguide 3.3.2 - Media

.media {
  margin: 1rem;
  overflow: hidden;

  &.right {
    .img {
      float: right;
      margin-left: 1rem;
    }
  }

  .media-content {
    overflow: hidden;
  }

  .img {
    float: left;
    margin-right: 1rem;

    img {
      display: block;
    }
  }
{'fraction_non_alphanumeric': 0.14208613283401256, 'fraction_numerical': 0.07555898226676946, 'mean_word_length': 2.5663786331500393, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 32, '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': '7425672', 'n_tokens_mistral': 3818, 'n_tokens_neox': 3299, 'n_words': 904}