// Hierarchie // Erst .lpm-list prüfen. Die Defaultliste. // Dann .lpm-list.in-three-columns prüfen. Die Default-Liste in Spalten. // Dann zusätzlich .size-large und .with-bullets und .with-checkmarks

// Mobile- und Base-Styles // Modifikationen für Desktop via Media-Queries reingeschachtelt

.lpm-list

list-style: none
counter-reset: li
padding-left: 0
margin-bottom: 0

li
  position: relative
  counter-increment: li
  padding: 0 0 0 30px
  @media (min-width: $breakpoint-xs)
    // Desktop:
    padding: 0 30px 0 30px
  &:before
    content: "."counter(li)
    font-weight: bold
    direction: rtl
    color: $green-500
    display: inline-block
    position: absolute
    top: 0
    left: 5px
    // Desktop:
    @media (min-width: $breakpoint-xs)
      left: 0

  p:last-child
    margin-bottom: 0

&.size-large
  li
    font-size: 18px
    line-height: 24px
    margin-bottom: 20px
    padding-left: 35px
    &:last-child
      margin-bottom: 30px
    // Desktop:
    @media (min-width: $breakpoint-xs)
      padding-left: 30px

&.size-large.in-three-columns
  // Desktop:
  @media (min-width: $breakpoint-xs)
    li
      padding-left: 25px

&.with-bullets
  li:before
    font-family: FontAwesome
    content: "\f111"
    padding-left: 0
    font-size: 7px
    top: 6px
    left: 3px

  &.size-large
    li
      padding-left: 25px
      &:before
        font-size: 10px
        top: 0
        left: 0

&.with-checkmarks
  li
    padding-left: 25px
  li:before
    font-family: FontAwesome
    content: "\f00c"
    top: 0
    left: 0

  &.size-large
    li
      line-height: 24px
      padding-left: 33px
      &:before
        font-size: 22px

&.in-three-columns
  li
    margin-bottom: 15px
    // Desktop:
    @media (min-width: $breakpoint-xs)
      margin-bottom: 30px
  li:last-child
    margin-bottom: 30px

  // Desktop:
  @media (min-width: $breakpoint-xs)
    display: flex
    flex-wrap: wrap
    li
      width: 33.333333333%
      flex: 0 0 auto