// HireUsGrid
//
// Custom grid for the Hire Us page
//
// markup:
// <div class="HireUsGrid">
//   <div class="HireUsGrid-greetings">
//     <div>Cell 1</div>
//   </div>
//   <div class="HireUsGrid-form">
//     <div>Cell 2</div>
//   </div>
//
// Styleguide 5.11

@import 'blue/theme_vars';

.HireUsGrid {
  display: flex;
  flex-direction: column;

  padding-left: $Theme-spacing-small;
  padding-right: $Theme-spacing-small;
}

.HireUsGrid-greetings {
  flex: 1;
}

.HireUsGrid-form {
  flex: 2;

  margin-top: $Theme-spacing-default;
}

@include media('<=desktop') {
  .HireUsGrid {
    align-items: stretch;
  }

  .HireUsGrid-greetings,
  .HireUsGrid-form {
    max-width: $Theme-grid-singleColumn-maxWidth;
  }
}

@include media('>tablet') {
  .HireUsGrid-form {
    margin-top: $Theme-spacing-large;
  }
}

@include media('>desktop') {
  .HireUsGrid {
    flex-direction: row;
  }

  .HireUsGrid-form {
    margin-top: 0;
    margin-left: $Theme-spacing-large;
  }
}

// HireUsGrid
//
// Custom grid for the Hire Us page
//
// markup:
// <div class="HireUsGrid">
//   <div class="HireUsGrid-greetings">
//     <div>Cell 1</div>
//   </div>
//   <div class="HireUsGrid-form">
//     <div>Cell 2</div>
//   </div>
//
// Styleguide 5.11

@import 'blue/theme_vars';

.HireUsGrid {
  display: flex;
  flex-direction: column;

  padding-left: $Theme-spacing-small;
  padding-right: $Theme-spacing-small;
}

.HireUsGrid-form {
  flex: 2;

  margin-top: $Theme-spacing-default;
}

@include media('<=desktop') {
  .HireUsGrid {
    align-items: stretch;
  }

  .HireUsGrid-greetings,
  .HireUsGrid-form {
    max-width: $Theme-grid-singleColumn-maxWidth;
  }
}

@include media('>tablet') {
  .HireUsGrid-form {
    margin-top: $Theme-spacing-large;
  }
}

@include media('>desktop') {
  .HireUsGrid {
    flex-direction: row;
  }

  .HireUsGrid-form {
    margin-top: 0;
    margin-left: $Theme-spacing-large;
  }

  .HireUsGrid-greetings {
    flex: 1;
  }
}

Fix issue with hire us form overflowing
Fix issue with hire us form overflowing

Why:

* In Safari on small dimensions (and by extension iOS), the hire us form was
  overflowing to the next panel. This was happening due to an issue with how
  Safari uses flex, when compared to webkit.

This change addresses the need by:

* Only setting the `flex-grow` to 1 when the direction of flex is row, which is
  really the only place we need it and does not mess up with Safari
