// GridCell
//
// Center its content and limits it to a threshold
//
// default - Aligns content to the left
// .GridCell--alignCenter - Centers the content
// .GridCell--alignRight - Aligns content to the right
//
// markup:
// <div class="GridCell {$modifiers}">
//   <div class="GridCell-content">
//     <div>Cell 1</div>
//     <div>Cell 3</div>
//   </div>
// </div>
//
// Styleguide 1.14

@import '../reset';
@import '../theme_vars';

.GridCell {
  display: flex;
  justify-content: flex-start;

  width: 100%;
  padding: 0 $Theme-spacing-small;
}

@include media('>=tablet') {
  .GridCell {
    padding: 0 $Theme-spacing-default;
  }

  .GridCell.GridCell--alignCenter {
    justify-content: center;
  }

  .GridCell.GridCell--alignRight {
    justify-content: flex-end;
  }
}

.GridCell-content {
  max-width: 565px;
  width: 100%;
}

// GridCell
//
// Center its content and limits it to a threshold
//
// default - Aligns content to the left
// .GridCell--alignCenter - Centers the content
// .GridCell--alignRight - Aligns content to the right
//
// markup:
// <div class="GridCell {$modifiers}">
//   <div class="GridCell-content">
//     <div>Cell 1</div>
//     <div>Cell 3</div>
//   </div>
// </div>
//
// Styleguide 1.14

@import '../reset';
@import '../theme_vars';

.GridCell {
  display: flex;
  justify-content: flex-start;

  width: 100%;
  padding: 0 $Theme-spacing-small;
}

@include media('>=tablet') {
  .GridCell {
    padding: 0 $Theme-spacing-default;
  }

  .GridCell.GridCell--alignCenter {
    justify-content: center;
  }

  .GridCell.GridCell--alignRight {
    justify-content: flex-end;
  }
}

.GridCell-content {
  width: 100%;
  max-width: 600px;
}

Change the max-width to the one required by the designs
Change the max-width to the one required by the designs

Could not find a good reason to have this weird number as a max width
