/*==========================================================================
  Single Become a member or friend row (before the footer)
  ========================================================================== */

.become-friend
  background-color: $purple
  padding: 90px 0

  .image
    position: relative
    .placeholder
      position: relative
      height: 0
      width: 100%
      padding-bottom: 50%

      +respond-to-width(1600)
        padding-bottom: 65%

      +respond-to-width(1350)
        padding-bottom: 80%

      +respond-to-width(950)
        padding-bottom: 100%

      span
        position: absolute
        left: 0
        top: 0
        height: 100%
        width: 100%
        background:
          image: url("/img/become-friend.jpg")
          size: cover
          position: 50% 25%



  .content
    vertical-align: top
    padding-top: 50px

    h4
      font-size: 1.75rem
      line-height: 1.2
      font-weight: medium()

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

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

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

  +respond-to-width(1350)
    .image
      width: column(5, 12)
    .content
      width: column(5, 12)
      padding-top: 20px

  +respond-to-width(1000)
    .content
      width: column(6, 12)

  +respond-to-width(550)
    padding: 0

    .grid-row
      width: 100%

    .image
      width: 100%
      .placeholder
        padding-bottom: 60%

    .content
      width: column(12)
      padding: 40px 0