.overview-after-links
  position: relative

  &:after
    content: ''
    position: absolute
    top: 0
    right: 0
    width: 50%
    height: 100%
    background-image: url("/img/forest_bottom.jpg")
    background-position: center right
    background-size: cover

  +respond-to-width(1000)
    .page-links
      width: column(7, 12)

    &:after
      width: column(4, 12)
.page-links, .relevant-pages
  padding: 80px 0
  p
    font-size: 1.05rem
    font-weight: bold()
    color: $darkBlue
    margin: 0 0 15px

  ul
    display: inline-block
    vertical-align: top
    width: 49%
    list-style: none
    padding: 0
    margin: 0
    font-size: 0.9rem
    line-height: 1.2

    li
      position: relative
      padding-left: 15px
      margin-bottom: 10px
      a
        color: $brightBlue
        text-decoration: none
        transition: color 0.2s

        &:before
          content: '›'
          position: absolute
          left: 0
          top: 0

        &:hover
          color: darken($brightBlue, 20%)

        &.active
          font-weight: bold()
          color: $darkBlue

  [class^="vso"] &
    p
      color: $darkTurquoise

    ul
      li
        a
          color: $turquoise
          &:hover
            color: $brightTurquoise

          &.active
            color: $darkTurquoise

  [class^="services"] &,
  [class^="jobs"] &
    p
      color: $servicesBlue

    ul
      li
        a
          color: $globalBlue
          &:hover
            color: darken($globalBlue, 15%)

          &.active
            color: $servicesBlue

  +respond-to-width(450)
    ul
      width: 100% !important

.relevant-pages