.lpm-col3-row
display: flex justify-content: space-between flex-wrap: wrap margin-left: -10px margin-right: -10px // Desktop: @media (min-width: $breakpoint-sm) margin-left: 0 margin-right: 0
.lpm-col3-col
display: flex width: 100% display: flex flex-direction: column background-color: white width: 100% justify-content: space-between // Desktop: @media (min-width: $breakpoint-sm) width: calc(100% / 3 - 40px / 3)
.lpm-col3-headline
margin: 20px 0 flex: 1
.lpm-col3-content-text
flex: 1 0 auto margin: 15px padding: 0 0 $gutter-width 0 > h2, > h3 margin-top: 0
.lpm-col3-content-avatar
flex: 0 2 auto margin: 0 15px 15px 15px
.lpm-col3-content-text, .lpm-col3-content-avatar
p:last-child margin-bottom: 0
// Desktop: @media (min-width: $breakpoint-sm)
.lpm-col3 margin-bottom: 30px
// Target those tripple boxes that are non-white .lpm-col3.with-background
margin-bottom: 30px .lpm-col3-row margin-left: 0 margin-right: 0 margin-top: 20px &.with-headline margin-top: 0 .lpm-col3-col margin-bottom: 20px // Desktop: @media (max-width: $breakpoint-sm) margin-bottom: 15px .lpm-col3-content margin: 0px 10px // Desktop: @media (max-width: $breakpoint-sm) margin: 0px 15px