/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
.getting-started {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(#fff), color-stop(#f5f6f7), to(#f5f6f7));
  background: linear-gradient(180deg, #fff 0, #fff calc(38%), #f5f6f7 calc(38%), #f5f6f7 100%); }
  @media screen and (min-width: 64em) {
    .getting-started {
      height: calc(100vh - 140px);
      background: linear-gradient(180deg, #fff 0, #fff calc(50% - 70px), #f5f6f7 calc(50% - 70px), #f5f6f7 100%); }
      .getting-started .vertical-align-middle {
        position: relative;
        top: calc(50% - 70px);
        -webkit-transform: translateY(50%);
                transform: translateY(50%); } }