.effect-chain

list-style: none
counter-reset: effects
margin-top: 4em

$spacing: 0.25rem
.effect-chain__link
  h3
    margin-top: 0.5rem
    margin-bottom: $spacing
    display: inline-block
    &::before
      counter-increment: effects
      content: counter(effects)
      display: inline-block
      font-weight: 500
      margin-right: 1rem
  h4
    margin-bottom: 0
    color: $okf-font-1

.effect-chain__sublink
  margin: 0 0 0 $spacing
  padding: 2.2rem 0 1.5rem 2rem
  border-left: 2px solid $okf-grey-2
  > li
    position: relative
    margin-bottom: 3rem
    list-style: none
    &::before
      content: ""
      position: absolute
      top: -0.2rem
      left: -2.5rem
      display: block
      width: 2rem
      height: 2rem
      background-color: white
    &::after
      content: ""
      position: absolute
      top: .5rem
      left: -2.4rem
      display: block
      width: .5em
      height: .5em
      background-color: $okf-grey-2
      border-radius: 50%

  &.problem
    > li::after,
    > li::before
      content: none
  &.causes
    > li:last-of-type::after
      content: "="
      background-color: transparent
      color: $okf-grey-2
      font-size: 2rem
      line-height: 0.5
      text-align: center
      left: -2.6rem
  &.effect
    > li:last-of-type::after
      content: "💪"
      background-color: white
      font-size: 1.2em
      line-height: 0.7
      left: -2.7rem
      width: 1rem
      height: 22rem
      border-radius: 0