@each $value in $viewports {
  $grid-mq-min: map-get($value, min);
  $grid-mq-max: breakpoint-max(map-get($value, max));
  $grid-columns: map-get($value, columns);

  @if ($grid-mq-min == null) {
    @media screen and (max-width: $grid-mq-max) {
      $breakout: $grid-columns * $column-width;
      $wrapper-width: $breakout + $container-gutter * 2;

      .breakout-container {
        padding-left: calc((100% - #{$breakout}) / 2);
        padding-right: calc((100% - #{$breakout}) / 2);
      }

      .grid-zone.grid_12.breakout-zone {
        margin-left: calc((100% - #{$wrapper-width}) / 2);
        margin-right: calc((100% - #{$wrapper-width}) / 2);
        padding-left: calc(0px - (100% - #{$wrapper-width}) / 2);
        padding-right: calc(0px - (100% - #{$wrapper-width}) / 2);
        width: $wrapper-width;
      }
    }
  }

  @if ($grid-mq-max == null) {
    @media screen and (min-width: $grid-mq-min) {
      $breakout: $grid-columns * $column-width;
      $wrapper-width: $breakout + $container-gutter * 2;

      .breakout-container {
        padding-left: calc((100% - #{$breakout}) / 2);
        padding-right: calc((100% - #{$breakout}) / 2);
      }

      .grid-zone.grid_12.breakout-zone {
        margin-left: calc((100% - #{$wrapper-width}) / 2);
        margin-right: calc((100% - #{$wrapper-width}) / 2);
        padding-left: calc(0px - (100% - #{$wrapper-width}) / 2);
        padding-right: calc(0px - (100% - #{$wrapper-width}) / 2);
        width: $wrapper-width;
      }
    }
  }

  @if ($grid-mq-max != null and $grid-mq-min != null ) {
    @media screen and (min-width: $grid-mq-min) and (max-width: $grid-mq-max) {
      $breakout: $grid-columns * $column-width;
      $wrapper-width: $breakout + $container-gutter * 2;

      .breakout-container {
        padding-left: calc((100% - #{$breakout}) / 2);
        padding-right: calc((100% - #{$breakout}) / 2);
      }

      .grid-zone.grid_12.breakout-zone {
        margin-left: calc((100% - #{$wrapper-width}) / 2);
        margin-right: calc((100% - #{$wrapper-width}) / 2);
        padding-left: calc(0px - (100% - #{$wrapper-width}) / 2);
        padding-right: calc(0px - (100% - #{$wrapper-width}) / 2);
        width: $wrapper-width;
      }
    }
  }
}