.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