Clay, a simple collections of Sass patterns

Clay.scss

// ----
// libsass (v3.3.6)
// ----

// Breakpoints, setter and mixins for mobile-first layouts
// =============================================================================

$-breakpoints: () !global;

@mixin breakpoint-set($breakpoint-name, $min-width) {
  $-breakpoints: map-merge($-breakpoints, ($breakpoint-name: $min-width)) !global;
}

@mixin breakpoint($value: 0) {
  $min-width: map-get($-breakpoints, $value) or $value;
  @if $min-width > 0 {
    @media only screen and (min-width: #{$min-width}) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin breakpoint-classes($suffix) {
  @each $breakpoint-name, $min-width in $-breakpoints {
    @include breakpoint($breakpoint-name) {
      .#{$breakpoint-name}-#{$suffix} {
        @content;
      }
    }
  }
}

// Supports, modernizer-style classes mixin
// =============================================================================

@mixin supports($features...) {
  $selector: '';
  @each $feature in $features {
    $selector: '.#{$feature}#{$selector}';
  }
  #{$selector} & {
    @content;
  }
}

// Colors, setter and function
// =============================================================================

$-colors: () !global;

@mixin color-set($color-name, $color-value) {
  $-colors: map-merge($-colors, ($color-name: $color-value)) !global;
}

@function color($color-name: text, $alpha: 1) {
  @return rgba(map-get($-colors, $color-name), $alpha);
}

// Typography, setters mixins and classes based on breakpoints
// =============================================================================

$-type: () !global;

@mixin type-set($type-selector, $type-group) {
  $-type: map-merge($-type, ($type-selector: $type-group)) !global;
  @debug $-type;
}

@mixin type($type-selector) {
  $type-group: map-get($-type, $type-selector);
  @each $breakpoint-name, $type-properties in $type-group {
    @include breakpoint($breakpoint-name) {
      @each $property, $value in $type-properties {
        #{$property}: #{$value};
      }
    }
  }
}

@mixin type-styles {
  @each $type-selector, $type-group in $-type {
    #{$type-selector} {
      @include type($type-selector);
    }
  }
}

// Grid mixins and classes based on breakpoints (IE10+ with autoprefixer)
// =============================================================================

$grid-columns: 12 !default;
$grid-gutters: 20px !default;

$grid-align-properties: (
  horitzontal-align-children: justify-content,
  vertical-align-children: align-items,
  vertical-align-self: align-self
) !default;

$grid-horizontal-align-options: (
  center: center,
  left: flex-start,
  right: flex-end,
  justify: space-between,
  spaced: space-around
) !default;

$grid-vertical-align-options: (
  center: center,
  top: flex-start,
  bottom: flex-end,
  strech: strech,
  baseline: baseline
) !default;

@mixin grid-size($size: expand, $columns: $grid-columns) {
  @if (type-of($size) == number) {
    $width: percentage($size / $columns);
    flex: 0 0 $width;
    max-width: $width;
  }
  @else if ($size == shrink) {
    flex: 0 0 auto;
  }
  @else if ($size == expand) {
    flex: 1 1 auto;
  }
}

@mixin grid-order($order: 0) {
  order: $order;
}

@mixin grid-offset($offset: 0, $columns: $grid-columns, $direction: left) {
  margin-#{$direction}: percentage($offset / $columns);
}

@mixin grid-align($align-property: horitzontal-align, $align-options: $grid-horizontal-align-options, $align-option: center) {
  $align-property: map-get($grid-align-properties, $align-property);
  #{$align-property}: map-get($align-options, $align-option);
}

@mixin grid-container {
    margin: 0;
    display: flex;
    position: relative;
    backface-visibility: hidden;
    height: auto;
    flex-wrap: wrap;
    @include grid-size(expand);
}

@mixin grid-column-gutters($gutter-left: 0, $gutter-right: null) {
  $gutter-right: if($gutter-right, $gutter-right, $gutter-left);
  padding-left: $gutter-left;
  padding-right: $gutter-right;
}

@mixin grid-classes (
  $grid-class: 'grid',
  $column-class: 'column',
  $columns: $grid-columns,
  $gutters: $grid-gutters) {

  .#{$grid-class} {
    @include grid-container;

    &__#{$column-class} {
      // Full width colum by default
      @include grid-size(expand);
    }

    @each $breakpoint-name, $min-width in $-breakpoints {
      @include breakpoint($breakpoint-name) {

        &--#{$breakpoint-name} {
          @each $align-option, $align-property in $grid-horizontal-align-options {
            // Horizontal align for all columns
            &-align-#{$align-option} {
              @include grid-align(horitzontal-align-children, $grid-horizontal-align-options, $align-option);
            }
          }

          @each $align-option, $align-property in $grid-vertical-align-options {
            // Vertical align for all columns
            &-valign-#{$align-option} {
              @include grid-align(vertical-align-children, $grid-vertical-align-options, $align-option);
            }
          }
        }

        &__#{$column-class}--#{$breakpoint-name} {

          @for $i from 1 through $columns {
            // Column width sizes
            &-#{$i}-of-#{$columns} {
              @include grid-size($i, $columns);
            }
            // Column offset Left
            &-offset-left-#{$i} {
              @include grid-offset($i, $columns, 'left');
            }
            // Column o Right
            &-offset-right-#{$i} {
              @include grid-offset($i, $columns, 'right');
            }
            // Column source ordering
            &-order-#{$i} {
              @include grid-order($i);
            }
          }

          @each $align-option, $align-property in $grid-vertical-align-options {
            // Align column self withing a grid
            &-valign-#{$align-option} {
              @include grid-align(vertical-align-self, $grid-vertical-align-options, $align-option);
            }
          }

          &-expand {
            // Column expand
            @include grid-size(expand);
          }
          &-shrink {
            // Column Shrink to width
            @include grid-size(shrink);
          }
          &--gutters {
            // Turn gutters on
            @include grid-column-gutters($gutters);
          }
          &--gutters-off {
            // Turn gutters off
            @include grid-column-gutters(0);
          }
        }
      }
    }
  }
}

@mixin grid-column(
  $breakpoint-name: small,
  $size: expand,
  $total-columns: $grid-columns,
  $offset-left: null,
  $offset-right: null,
  $order: null,
  $valign: null
  ) {
    @include breakpoint($breakpoint-name) {
      @include grid-size($size, $total-columns);
      @if $order {
        @include grid-order($order);
      }
      @if $offset-left {
        @include grid-offset($offset-left, $total-columns, 'left');
      }
      @if $offset-right {
        @include grid-offset($offset-right, $total-columns, 'right');
      }
      @if $order {
        @include grid-order($order);
      }
      @if $valign {
        @include grid-align(vertical-align-self, $vertical-align-options, $valign);
      }
    }
}


// Reset
// =============================================================================

@mixin reset {
  *,
  *::after,
  *::before {
    position: relative;
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
  }
  html {
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  img {
    max-width: 100%;
    height: auto;
    border: 0;
  }
}

// Set Suggested settings, but everything below is optional
// =============================================================================

@include breakpoint-set('small', 0);
@include breakpoint-set('medium', 736px);
@include breakpoint-set('large', 1024px);

@include color-set('text', #000000);
@include color-set('link', #EC1D24);
@include color-set('headline', #BC0000);

@include type-set('body', (
  small: (
    font-family: '"Rubik", sans-serif',
    font-weight: 400,
    font-size: 1rem,
    line-height: 1.6,
    color: color(text)
  )
));

@include type-set(('h1', '.h1', 'h2', '.h2', 'h3', '.h3', 'h4', '.h4', 'h5', '.h5', 'h6', '.h6'), (
  small:(
    font-family: '"Rubik", sans-serif',
    font-weight: 700,
    font-size: 1rem,
    line-height: 1.6,
    color: color(headline)
  )
));

@include type-set(('h1', '.h1'), (
  small: (font-size: 48px),
  medium: (font-size: 60px)
));

@include type-set(('h2', '.h2'), (
  small: (font-size: 36px),
  medium: (font-size: 48px)
));

@include type-set(('h3', '.h3'), (
  small: (font-size: 24px),
  medium: (font-size: 36px)
));

@include type-set(('h4', '.h4'), (
  small: (font-size: 21px),
  medium: (font-size: 24px)
));

@include type-set(('h5', '.h5'), (
  small: (font-size: 18px)
));

@include type-set(('h6', '.h6'), (
  small: (font-size: 16px)
));

// Generate Reset, type and grid classes
// =============================================================================

@include reset;

@include type-styles;

@include grid-classes;


// Generate Breakpoint Helper Classes
// =============================================================================
@include breakpoint-classes(hide) {
  display: none;
}
@include breakpoint-classes(show) {
  display: initial;
}

SassMeister-output.css

*,
*::after,
*::before {
  position: relative;
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

body {
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: black;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
  color: #bc0000;
}

h1, .h1 {
  font-size: 48px;
}

@media only screen and (min-width: 736px) {
  h1, .h1 {
    font-size: 60px;
  }
}

h2, .h2 {
  font-size: 36px;
}

@media only screen and (min-width: 736px) {
  h2, .h2 {
    font-size: 48px;
  }
}

h3, .h3 {
  font-size: 24px;
}

@media only screen and (min-width: 736px) {
  h3, .h3 {
    font-size: 36px;
  }
}

h4, .h4 {
  font-size: 21px;
}

@media only screen and (min-width: 736px) {
  h4, .h4 {
    font-size: 24px;
  }
}

h5, .h5 {
  font-size: 18px;
}

h6, .h6 {
  font-size: 16px;
}

.grid {
  margin: 0;
  display: flex;
  position: relative;
  backface-visibility: hidden;
  height: auto;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.grid__column {
  flex: 1 1 auto;
}

.grid--small-align-center {
  justify-content: center;
}

.grid--small-align-left {
  justify-content: flex-start;
}

.grid--small-align-right {
  justify-content: flex-end;
}

.grid--small-align-justify {
  justify-content: space-between;
}

.grid--small-align-spaced {
  justify-content: space-around;
}

.grid--small-valign-center {
  align-items: center;
}

.grid--small-valign-top {
  align-items: flex-start;
}

.grid--small-valign-bottom {
  align-items: flex-end;
}

.grid--small-valign-strech {
  align-items: strech;
}

.grid--small-valign-baseline {
  align-items: baseline;
}

.grid__column--small-1-of-12 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.grid__column--small-offset-left-1 {
  margin-left: 8.33333%;
}

.grid__column--small-offset-right-1 {
  margin-right: 8.33333%;
}

.grid__column--small-order-1 {
  order: 1;
}

.grid__column--small-2-of-12 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.grid__column--small-offset-left-2 {
  margin-left: 16.66667%;
}

.grid__column--small-offset-right-2 {
  margin-right: 16.66667%;
}

.grid__column--small-order-2 {
  order: 2;
}

.grid__column--small-3-of-12 {
  flex: 0 0 25%;
  max-width: 25%;
}

.grid__column--small-offset-left-3 {
  margin-left: 25%;
}

.grid__column--small-offset-right-3 {
  margin-right: 25%;
}

.grid__column--small-order-3 {
  order: 3;
}

.grid__column--small-4-of-12 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.grid__column--small-offset-left-4 {
  margin-left: 33.33333%;
}

.grid__column--small-offset-right-4 {
  margin-right: 33.33333%;
}

.grid__column--small-order-4 {
  order: 4;
}

.grid__column--small-5-of-12 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.grid__column--small-offset-left-5 {
  margin-left: 41.66667%;
}

.grid__column--small-offset-right-5 {
  margin-right: 41.66667%;
}

.grid__column--small-order-5 {
  order: 5;
}

.grid__column--small-6-of-12 {
  flex: 0 0 50%;
  max-width: 50%;
}

.grid__column--small-offset-left-6 {
  margin-left: 50%;
}

.grid__column--small-offset-right-6 {
  margin-right: 50%;
}

.grid__column--small-order-6 {
  order: 6;
}

.grid__column--small-7-of-12 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.grid__column--small-offset-left-7 {
  margin-left: 58.33333%;
}

.grid__column--small-offset-right-7 {
  margin-right: 58.33333%;
}

.grid__column--small-order-7 {
  order: 7;
}

.grid__column--small-8-of-12 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.grid__column--small-offset-left-8 {
  margin-left: 66.66667%;
}

.grid__column--small-offset-right-8 {
  margin-right: 66.66667%;
}

.grid__column--small-order-8 {
  order: 8;
}

.grid__column--small-9-of-12 {
  flex: 0 0 75%;
  max-width: 75%;
}

.grid__column--small-offset-left-9 {
  margin-left: 75%;
}

.grid__column--small-offset-right-9 {
  margin-right: 75%;
}

.grid__column--small-order-9 {
  order: 9;
}

.grid__column--small-10-of-12 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.grid__column--small-offset-left-10 {
  margin-left: 83.33333%;
}

.grid__column--small-offset-right-10 {
  margin-right: 83.33333%;
}

.grid__column--small-order-10 {
  order: 10;
}

.grid__column--small-11-of-12 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.grid__column--small-offset-left-11 {
  margin-left: 91.66667%;
}

.grid__column--small-offset-right-11 {
  margin-right: 91.66667%;
}

.grid__column--small-order-11 {
  order: 11;
}

.grid__column--small-12-of-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.grid__column--small-offset-left-12 {
  margin-left: 100%;
}

.grid__column--small-offset-right-12 {
  margin-right: 100%;
}

.grid__column--small-order-12 {
  order: 12;
}

.grid__column--small-valign-center {
  align-self: center;
}

.grid__column--small-valign-top {
  align-self: flex-start;
}

.grid__column--small-valign-bottom {
  align-self: flex-end;
}

.grid__column--small-valign-strech {
  align-self: strech;
}

.grid__column--small-valign-baseline {
  align-self: baseline;
}

.grid__column--small-expand {
  flex: 1 1 auto;
}

.grid__column--small-shrink {
  flex: 0 0 auto;
}

.grid__column--small--gutters {
  padding-left: 20px;
  padding-right: 20px;
}

.grid__column--small--gutters-off {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (min-width: 736px) {
  .grid--medium-align-center {
    justify-content: center;
  }
  .grid--medium-align-left {
    justify-content: flex-start;
  }
  .grid--medium-align-right {
    justify-content: flex-end;
  }
  .grid--medium-align-justify {
    justify-content: space-between;
  }
  .grid--medium-align-spaced {
    justify-content: space-around;
  }
  .grid--medium-valign-center {
    align-items: center;
  }
  .grid--medium-valign-top {
    align-items: flex-start;
  }
  .grid--medium-valign-bottom {
    align-items: flex-end;
  }
  .grid--medium-valign-strech {
    align-items: strech;
  }
  .grid--medium-valign-baseline {
    align-items: baseline;
  }
  .grid__column--medium-1-of-12 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .grid__column--medium-offset-left-1 {
    margin-left: 8.33333%;
  }
  .grid__column--medium-offset-right-1 {
    margin-right: 8.33333%;
  }
  .grid__column--medium-order-1 {
    order: 1;
  }
  .grid__column--medium-2-of-12 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .grid__column--medium-offset-left-2 {
    margin-left: 16.66667%;
  }
  .grid__column--medium-offset-right-2 {
    margin-right: 16.66667%;
  }
  .grid__column--medium-order-2 {
    order: 2;
  }
  .grid__column--medium-3-of-12 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid__column--medium-offset-left-3 {
    margin-left: 25%;
  }
  .grid__column--medium-offset-right-3 {
    margin-right: 25%;
  }
  .grid__column--medium-order-3 {
    order: 3;
  }
  .grid__column--medium-4-of-12 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .grid__column--medium-offset-left-4 {
    margin-left: 33.33333%;
  }
  .grid__column--medium-offset-right-4 {
    margin-right: 33.33333%;
  }
  .grid__column--medium-order-4 {
    order: 4;
  }
  .grid__column--medium-5-of-12 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .grid__column--medium-offset-left-5 {
    margin-left: 41.66667%;
  }
  .grid__column--medium-offset-right-5 {
    margin-right: 41.66667%;
  }
  .grid__column--medium-order-5 {
    order: 5;
  }
  .grid__column--medium-6-of-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid__column--medium-offset-left-6 {
    margin-left: 50%;
  }
  .grid__column--medium-offset-right-6 {
    margin-right: 50%;
  }
  .grid__column--medium-order-6 {
    order: 6;
  }
  .grid__column--medium-7-of-12 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .grid__column--medium-offset-left-7 {
    margin-left: 58.33333%;
  }
  .grid__column--medium-offset-right-7 {
    margin-right: 58.33333%;
  }
  .grid__column--medium-order-7 {
    order: 7;
  }
  .grid__column--medium-8-of-12 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .grid__column--medium-offset-left-8 {
    margin-left: 66.66667%;
  }
  .grid__column--medium-offset-right-8 {
    margin-right: 66.66667%;
  }
  .grid__column--medium-order-8 {
    order: 8;
  }
  .grid__column--medium-9-of-12 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid__column--medium-offset-left-9 {
    margin-left: 75%;
  }
  .grid__column--medium-offset-right-9 {
    margin-right: 75%;
  }
  .grid__column--medium-order-9 {
    order: 9;
  }
  .grid__column--medium-10-of-12 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .grid__column--medium-offset-left-10 {
    margin-left: 83.33333%;
  }
  .grid__column--medium-offset-right-10 {
    margin-right: 83.33333%;
  }
  .grid__column--medium-order-10 {
    order: 10;
  }
  .grid__column--medium-11-of-12 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .grid__column--medium-offset-left-11 {
    margin-left: 91.66667%;
  }
  .grid__column--medium-offset-right-11 {
    margin-right: 91.66667%;
  }
  .grid__column--medium-order-11 {
    order: 11;
  }
  .grid__column--medium-12-of-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid__column--medium-offset-left-12 {
    margin-left: 100%;
  }
  .grid__column--medium-offset-right-12 {
    margin-right: 100%;
  }
  .grid__column--medium-order-12 {
    order: 12;
  }
  .grid__column--medium-valign-center {
    align-self: center;
  }
  .grid__column--medium-valign-top {
    align-self: flex-start;
  }
  .grid__column--medium-valign-bottom {
    align-self: flex-end;
  }
  .grid__column--medium-valign-strech {
    align-self: strech;
  }
  .grid__column--medium-valign-baseline {
    align-self: baseline;
  }
  .grid__column--medium-expand {
    flex: 1 1 auto;
  }
  .grid__column--medium-shrink {
    flex: 0 0 auto;
  }
  .grid__column--medium--gutters {
    padding-left: 20px;
    padding-right: 20px;
  }
  .grid__column--medium--gutters-off {
    padding-left: 0;
    padding-right: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .grid--large-align-center {
    justify-content: center;
  }
  .grid--large-align-left {
    justify-content: flex-start;
  }
  .grid--large-align-right {
    justify-content: flex-end;
  }
  .grid--large-align-justify {
    justify-content: space-between;
  }
  .grid--large-align-spaced {
    justify-content: space-around;
  }
  .grid--large-valign-center {
    align-items: center;
  }
  .grid--large-valign-top {
    align-items: flex-start;
  }
  .grid--large-valign-bottom {
    align-items: flex-end;
  }
  .grid--large-valign-strech {
    align-items: strech;
  }
  .grid--large-valign-baseline {
    align-items: baseline;
  }
  .grid__column--large-1-of-12 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .grid__column--large-offset-left-1 {
    margin-left: 8.33333%;
  }
  .grid__column--large-offset-right-1 {
    margin-right: 8.33333%;
  }
  .grid__column--large-order-1 {
    order: 1;
  }
  .grid__column--large-2-of-12 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .grid__column--large-offset-left-2 {
    margin-left: 16.66667%;
  }
  .grid__column--large-offset-right-2 {
    margin-right: 16.66667%;
  }
  .grid__column--large-order-2 {
    order: 2;
  }
  .grid__column--large-3-of-12 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid__column--large-offset-left-3 {
    margin-left: 25%;
  }
  .grid__column--large-offset-right-3 {
    margin-right: 25%;
  }
  .grid__column--large-order-3 {
    order: 3;
  }
  .grid__column--large-4-of-12 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .grid__column--large-offset-left-4 {
    margin-left: 33.33333%;
  }
  .grid__column--large-offset-right-4 {
    margin-right: 33.33333%;
  }
  .grid__column--large-order-4 {
    order: 4;
  }
  .grid__column--large-5-of-12 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .grid__column--large-offset-left-5 {
    margin-left: 41.66667%;
  }
  .grid__column--large-offset-right-5 {
    margin-right: 41.66667%;
  }
  .grid__column--large-order-5 {
    order: 5;
  }
  .grid__column--large-6-of-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid__column--large-offset-left-6 {
    margin-left: 50%;
  }
  .grid__column--large-offset-right-6 {
    margin-right: 50%;
  }
  .grid__column--large-order-6 {
    order: 6;
  }
  .grid__column--large-7-of-12 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .grid__column--large-offset-left-7 {
    margin-left: 58.33333%;
  }
  .grid__column--large-offset-right-7 {
    margin-right: 58.33333%;
  }
  .grid__column--large-order-7 {
    order: 7;
  }
  .grid__column--large-8-of-12 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .grid__column--large-offset-left-8 {
    margin-left: 66.66667%;
  }
  .grid__column--large-offset-right-8 {
    margin-right: 66.66667%;
  }
  .grid__column--large-order-8 {
    order: 8;
  }
  .grid__column--large-9-of-12 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid__column--large-offset-left-9 {
    margin-left: 75%;
  }
  .grid__column--large-offset-right-9 {
    margin-right: 75%;
  }
  .grid__column--large-order-9 {
    order: 9;
  }
  .grid__column--large-10-of-12 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .grid__column--large-offset-left-10 {
    margin-left: 83.33333%;
  }
  .grid__column--large-offset-right-10 {
    margin-right: 83.33333%;
  }
  .grid__column--large-order-10 {
    order: 10;
  }
  .grid__column--large-11-of-12 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .grid__column--large-offset-left-11 {
    margin-left: 91.66667%;
  }
  .grid__column--large-offset-right-11 {
    margin-right: 91.66667%;
  }
  .grid__column--large-order-11 {
    order: 11;
  }
  .grid__column--large-12-of-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid__column--large-offset-left-12 {
    margin-left: 100%;
  }
  .grid__column--large-offset-right-12 {
    margin-right: 100%;
  }
  .grid__column--large-order-12 {
    order: 12;
  }
  .grid__column--large-valign-center {
    align-self: center;
  }
  .grid__column--large-valign-top {
    align-self: flex-start;
  }
  .grid__column--large-valign-bottom {
    align-self: flex-end;
  }
  .grid__column--large-valign-strech {
    align-self: strech;
  }
  .grid__column--large-valign-baseline {
    align-self: baseline;
  }
  .grid__column--large-expand {
    flex: 1 1 auto;
  }
  .grid__column--large-shrink {
    flex: 0 0 auto;
  }
  .grid__column--large--gutters {
    padding-left: 20px;
    padding-right: 20px;
  }
  .grid__column--large--gutters-off {
    padding-left: 0;
    padding-right: 0;
  }
}

.small-hide {
  display: none;
}

@media only screen and (min-width: 736px) {
  .medium-hide {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .large-hide {
    display: none;
  }
}

.small-show {
  display: initial;
}

@media only screen and (min-width: 736px) {
  .medium-show {
    display: initial;
  }
}

@media only screen and (min-width: 1024px) {
  .large-show {
    display: initial;
  }
}