/*==========================================================================
  About page
  ========================================================================== */

.about, .page

  .main-content
    position: relative
    overflow: hidden

    article
      position: relative
      margin-top: 180px
      margin-bottom: 100px

      &:first-of-type
        margin-top: 180px

      .grid-row
        width: 100%
        +flex(flex-start, flex-start)
        max-width: 1960px

      .background-shape
        position: absolute
        z-index: -4
        opacity: 0.75
        right: 0
        bottom: -100px
        width: 100%
        img
          width: 100%

      .text
        width: column(5, 14)
        line-height: 1.5rem
        margin-left: column(1, 14)
        margin-right: column(1, 14)

        +respond-to-width(1000)
          margin-top: -100px

        h2
          margin-bottom: 50px
          font-family: workSans()
          font-weight: medium()
          font-size: 1.75rem
          line-height: 1.2
          color: $headerBlue
          letter-spacing: -0.35px

        p
          margin: 1rem 0
          font-size: 0.9rem
          color: $darkPurple
          font-weight: light()
          letter-spacing: -0.45px

          &:first-of-type
            margin-top: 0

          &:last-of-type
            margin-bottom: 0

          &.intro
            font-weight: regular()

        a
          color: $bluePurple3
          text-decoration: underline

          &:hover
            color: $bluePurple2

        .button
          position: relative
          display: inline-block
          margin-top: 50px
          padding: 8px 55px 8px 20px
          border-radius: 10px
          background-color: $orange
          font-family: rubik()
          font-weight: medium()
          font-size: 0.8rem
          transition: background 0.3s
          cursor: pointer
          text-decoration: none
          color: white

          &:after
            content: ''
            display: inline-block
            position: absolute
            right: 20px
            bottom: 17px
            +arrowWhite
            +translate3d(0,0,0)
            transition: transform 0.3s

          &:hover
            color: white
            background-color: $flatOrange
            &:after
              +translate3d(5px, 0, 0)

      .image
        position: relative
        overflow: visible
        width: column(6, 14)

        &:before
          content: ''
          position: absolute
          top: -100px
          display: block
          width: 100%
          height: calc(100% - 95px)

        &:after
          content: ''
          position: absolute
          z-index: -2
          display: block
          width: 100%
          height: 100%
          right: column(-1, 12)
          bottom: 35px
          border-radius: 100%
          max-width: 320px
          max-height: 320px

        &.placeholder:empty
          height: 350px
          background-color: $lighterGray

        img
          width: 100%
          position: relative

          &.medium
            display: none

          +respond-to-width(1200)
            &.medium
              display: block

            &.large
              display: none

      &:nth-of-type(4n + 1)
        .image
          &:before
            background: $bluePurple2
            background: linear-gradient(-90deg, $bluePurpleGradient23)

          &:after
            background-color: $yellow

      &:nth-of-type(4n + 2)
        .image
          &:before
            background: $flatOrange

      &:nth-of-type(4n + 3)
        .image
          &:before
            background: $bluePurple1

          &:after
            background-color: $flatOrange

      &:nth-of-type(4n + 4)
        .image
          &:before
            background: $yellow

      &:nth-of-type(odd)
        .image
          &:before
            right: column(-1, 6)


      &:nth-of-type(even)
        .text
          +order(2)

        .image
          +order(1)
          margin-left: column(1, 14)

          &:before
            left: column(-1, 6)

      &:last-of-type
        margin-bottom: 80px

      &.page-full-text-block
        .text
          width: column(8, 14)
          margin-left: auto
          margin-right: auto



  /* Mobile view
    ========================================================================== */
  +respond-to-width(750)
    .main-content

      article
        margin-top: 100px
        margin-bottom: 100px

        &:first-of-type
          margin-top: 100px

        .grid-row
          display: block

        .image
          width: column(11)
          margin-top: 140px
          margin-left: column(1)
          &:before
            top: -65px
          &:after
            bottom: 0

          &.placeholder
            display: none

        .text
          margin-top: 0
          width: column(12)

        &.page-full-text-block
          .text
            width: column(12)