<commit_before>.media {

  &.-framed {
    background-color: #fff;
    padding: 5px;

    @include media($desktop) {
      padding: 10px;
    }

    img {
      width: 100%;
    }

    .__copy {
      font-size: $font-small;
      line-height: 1.2;
    }
  }

}




// Main Reportback container
.reportback {
  background-color: #f0f;
  overflow: hidden;

  @include media($tablet) {
    .gallery--reportback {
      @include span-columns(3 of 12);
      @include omega();
      float: right;
    }

    form {
      @include span-columns(9 of 12);
    }
  }

  @include media($desktop) {
    .gallery--reportback {
      @include span-columns(6 of 12);
      @include omega();
      float: right;
    }

    form {
      @include span-columns(6 of 12);
    }
  }
}




.gallery--reportback {
  background: #ff0;
  overflow: hidden;

  > li {
    @include span-columns(6 of 12);
    @include omega(2n);  // @TODO: need IE8 fallback!
    margin-bottom: flex-gutter(12);

    @include media($tablet) {
      margin-right: 0;
      width: 100%;
      margin-bottom: flex-gutter(3);
    }

    @include media($desktop) {
      @include span-columns(6 of 12);
      @include omega(2n);  // @TODO: need IE8 fallback!
      margin-bottom: flex-gutter(6);
    }

    &:nth-child(n+5) {
      display: none;

      @include media($desktop) {
        display: block;
      }
    }
  }
}





.reportback form {
  background-color: #fff;
  padding: 15px;
}


// @TOTD: Only temp; change class name!
.gigantor {
  background-color: #eee;
  border: 0;

  > .wrapper {
    top: 0;
  }
}<commit_msg>Updates to styles.<commit_after>.media {

  &.-framed {
    background-color: #fff;
    padding: 5px;

    @include media($desktop) {
      padding: 10px;
    }

    img {
      width: 100%;
    }

    .__copy {
      font-size: $font-small;
      line-height: 1.2;
    }
  }

}




// Main Reportback container
.reportback {
  background-color: #f0f;
  overflow: hidden;

  @include media($tablet) {
    .gallery--reportback {
      @include span-columns(3 of 12);
      @include omega();
      float: right;
    }

    form {
      @include span-columns(9 of 12);
    }
  }

  @include media($desktop) {
    .gallery--reportback {
      @include span-columns(6 of 12);
      @include omega();
      float: right;
    }

    form {
      @include span-columns(6 of 12);
    }
  }
}




.gallery--reportback {
  background: #ff0;
  overflow: hidden;

  > li {
    @include span-columns(6 of 12);
    @include omega(2n);  // @TODO: need IE8 fallback!
    margin-bottom: flex-gutter(12);

    @include media($tablet) {
      margin-right: 0;
      width: 100%;
      margin-bottom: flex-gutter(3);
    }

    @include media($desktop) {
      @include span-columns(6 of 12);
      @include omega(2n);  // @TODO: need IE8 fallback!
      margin-bottom: flex-gutter(6);
    }

    &:nth-child(n+5) {
      display: none;

      @include media($desktop) {
        display: block;
      }
    }
  }
}





.reportback form {
  background-color: #fff;
  padding: 15px;
}


// @TOTD: Only temp; change class name!
.gigantor {
  background-color: #eee;
  border: 0;
  display: block;
  height: 0;
  padding: 0 0 0 100%;
  position: relative;

  > .wrapper {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
{'fraction_non_alphanumeric': 0.14814814814814814, 'fraction_numerical': 0.031315868714242696, 'mean_word_length': 2.0282588878760257, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '7591817', 'n_tokens_mistral': 1321, 'n_tokens_neox': 1175, 'n_words': 271}