/* ==========================================================================
   Specific CSS for the process page
   ========================================================================== */

.process

  // Remove margin on the header
  header.main
    margin-bottom: 0

  // Process holder
  .process-step
    position: relative

    display: flex
    margin: 0 auto
    max-width: $gridMaxWidth

    height: 100vh

    .image
      width: 50%
      background: #efefef
      background-size: cover

    .text-block-holder
      width: 50%
      align-self: center

    .text-block
      padding: column(1,7)

    .text-block > *
      opacity: 0
      +transform(translate3d(0,60px,0))

    .button
      cursor: pointer

    // Switch image and text every other step
    &:nth-child(2n)
      .image
        order: 2

      .text-block-holder
        order: 1

  +respond-to-width($mdGridBreakpoint)
    .process-step
      height: auto

  +respond-to-width($smGridBreakpoint)
    .process-step
      display: block
      .image
        width: 100%
        height: 75vw /* 4:3 */

      .text-block-holder
        width: 100%

  +respond-to-width($xsGridBreakpoint)
    .process-step
      .text-block
        padding: $mobileTopSpace $mobileAsideSpace $mobileBottomSpace
        .button
          margin-top: 10px

      h2
        margin-bottom: 20px