<commit_before>//Outlying structure for the grid

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
  width: 100%;
  max-width: $large-wrapper;
  margin: 0 auto;
  height: 100%;
}

.grid {
  float: left;
  padding: $spacing;
  min-height: 1px;
  height: 100%;
}

.grid-flex {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.grid-flex {
  .one-fifth, .one-quarter, .one-third, .two-fifths, .one-half, .three-fifths, .two-thirds, .three-quarters, .four-fifths, .whole {
    padding: $spacing;
    @media (max-width: $medium){
      padding: $spacing-small;
    }
  }
}

//Setting the possible widths for elements - fraction based.

.one-fifth {
  width: 20%;
}

.one-quarter {
	width: 25%;
}

.one-third {
  width: 33.33%;
}

.two-fifths {
  width: 40%;
}

.one-half {
	width: 50%;
}

.three-fifths {
  width: 60%;
}

.two-thirds {
  width: 66.67%;
}

.three-quarters {
  width: 75%;
}

.four-fifths {
  width: 80%;
}

.whole {
	width: 100%;
}

//Helper classes

.right {
  float: right;
}

.left {
  float: left;
}

.center {
  margin: 0 auto;
}

.clear {
  content: "";
  display: block;
  clear: both;
}

//Responsive breakpoints

@media all and (max-width: $medium){

  .grid-flex * {
    width: 100%;
  }
}

@media all and (min-width: $medium){

  .wrapper {
    max-width: $medium-wrapper;
  }

}

@media all and (min-width: $large){

  .wrapper {
    max-width: $large-wrapper;
  }

}<commit_msg>Changed wrapper to boundary, added flexbox utils<commit_after>*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.boundary {
  width: 90%;
  max-width: $large-boundary;
  margin: 0 auto;
  height: 100%;
  @media (min-width: $medium){
    max-width: $medium-boundary;
  }
}

.grid {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.block {
  padding: $spacing;
  @media all and (max-width: $medium){
    padding: $spacing/2;
  }
}

//Setting the possible widths for elements - fraction based.

.one-fifth {
  width: 20%;
}

.one-quarter {
	width: 25%;
}

.one-third {
  width: 33.33%;
}

.two-fifths {
  width: 40%;
}

.one-half {
	width: 50%;
}

.three-fifths {
  width: 60%;
}

.two-thirds {
  width: 66.67%;
}

.three-quarters {
  width: 75%;
}

.four-fifths {
  width: 80%;
}

.whole {
	width: 100%;
}

//Helper classes

.right {
  float: right;
}

.left {
  float: left;
}

.center {
  margin: 0 auto;
}

.clear {
  content: "";
  display: block;
  clear: both;
}

//Flexbox utils

.fx-col {
  flex-direction: column;
}

.fx-jcs {
  justify-content: flex-start;
}

.fx-jce {
  justify-content: flex-end;
}

.fx-jcc {
  justify-content: center;
}

.fx-ais {
  align-items: flex-start;
}

.fx-aie {
  align-items: flex-end;
}

.fx-aic {
  align-items: center;
}



.fx-wrap {
  flex-wrap: wrap;
}

//Responsive breakpoints

@media all and (max-width: $medium){

  .grid * {
    width: 100%;
  }
}

@media all and (min-width: $large){

  .boundary {
    max-width: $large-boundary;
  }

}
{'fraction_non_alphanumeric': 0.17995722578674, 'fraction_numerical': 0.028108768713718302, 'mean_word_length': 2.5781420765027323, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '1821582', 'n_tokens_mistral': 1484, 'n_tokens_neox': 1361, 'n_words': 306}