// 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