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

.about
  .sub-main-text
    .grid-row
      margin-bottom: 55px

      .arrow-button
        position: absolute
        bottom: 9px
        left: column(4, 24)

        +respond-to-width(1300)
          left: column(2, 24)

        +respond-to-width(900)
          position: relative
          left: 0
          bottom: 0
          margin: 20px auto 0

      +respond-to-width(580)
        width: 100%


  .impression-row
    position: relative
    padding-top: 75px
    margin-bottom: 0

    .grid-row
      position: relative

    .background
      position: absolute
      z-index: 1
      height: calc(100% - 160px)
      width: 100%
      top: 160px
      left: 0
      background-color: $lightGray2

    .waves
      position: absolute
      opacity: 0.15
      left: column(-1, 22)
      top: 15px

    .images
      position: relative
      z-index: 2
      .first-image
        position: relative
        top: -35px
        z-index: 3
        margin-left: column(2, 24)
        width: column(10, 24)
        padding-bottom: 20px

        +respond-to-width(1250)
          width: column(12, 24)

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

          span
            position: absolute
            left: 0
            top: 0
            width: 100%
            height: 100%
            background-size: cover
            background-position: center

            &.small
              display: none

            +respond-to-width(500)
              &.medium
                display: none

              &.small
                display: block

      .second-image
        position: absolute
        right: column(1, 12)
        top: 0
        width: column(19, 24)
        height: 100%
        span
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          background-size: cover
          background-position: center

          &.large, &.medium, &.small
            display: none

          +respond-to-width(1540)
            &.original
              display: none

            &.large
              display: block

          +respond-to-width(1040)
            &.large
              display: none

            &.medium
              display: block

    .main-buttons-wrapper
      position: relative
      z-index: 2
      bottom: -80px

      >p
        font-size: 1.1rem
        line-height: 1.2
        color: $blue
        text-align: center
        margin: 0
        padding: 20px

      .main-buttons
        margin-bottom: 0
        .wrapper
          margin-top: 0

    +respond-to-width(580)
      .grid-row
        width: 100%

      .waves
        display: none

      .images
        .first-image
          width: 80%
          margin-left: auto

          +respond-to-width(400)
            width: 90%

        .second-image
          right: 0
          top: 40px
          width: 100%
          height: 85%

      .main-buttons-wrapper
        bottom: -40px


  #sustainable_quality
    padding: 180px 0 120px

  .posts-row
    margin-top: 175px