.why

background: $gray-200
text-align: center
position: relative

+desktop
  padding-bottom: 25px

p
  +desktop
    margin-bottom: 0

div>strong
  display: inline-block
  margin-bottom: 5px
  font-weight: 600

h3
  margin-bottom: 30px
  font-weight: 600
  text-align: left

  +desktop
    margin-left: 160px

  +phone
    margin-left: 80px

.why-container
  margin-bottom: 50px
  text-align: left

  +desktop
    height: 150px
    padding-left: 160px

  +phone
    margin-bottom: 40px
    padding-left: 80px

  &.why-transparency
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-transparency.png') no-repeat
    +desktop
      background-size: (274px/2) (166px/2)
      background-position: 0 0
    +phone
      background-size: (274px/4) (166px/4)
      background-position: 0 0

  &.why-security
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-security.png') no-repeat
    +desktop
      background-size: (229px/2) (242px/2)
      background-position: 3px 0
    +phone
      background-size: (229px/4) (242px/4)
      background-position: 3px 0

  &.why-diversity
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-diversity.png') no-repeat
    +desktop
      background-size: (198px/2) (249px/2)
      background-position: 23px 0
    +phone
      background-size: (198px/4) (249px/4)
      background-position: 12px 0

  &.why-donations
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-donations.png') no-repeat
    +desktop
      background-size: (259px/2) (227px/2)
      background-position: 20px 0
    +phone
      background-size: (259px/4) (227px/4)
      background-position: 5px 0

  &.why-nonprofit
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-nonprofit.png') no-repeat
    +desktop
      background-size: (241px/2) (128px/2)
      background-position: 20px 0
    +phone
      background-size: (241px/4) (128px/4)
      background-position: 8px 0

  &.why-knowledge
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-knowledge.png') no-repeat
    +desktop
      background-size: (252px/2) (190px/2)
      background-position: 20px 0
    +phone
      background-size: (252px/4) (190px/4)
      background-position: 4px 0

  &.why-companies
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-companies.png') no-repeat
    +desktop
      background-size: (266px/2) (124px/2)
      background-position: 0 0%
    +phone
      background-size: (266px/4) (124px/4)
      background-position: 0 0%

  &.why-supporters
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-supporters.png') no-repeat
    +desktop
      background-size: (204px/2) (210px/2)
      background-position: 20px 0%
    +phone
      background-size: (204px/4) (210px/4)
      background-position: 12px 0%

  &.why-donation
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-donation.png') no-repeat
    +desktop
      background-size: (138px/2) (220px/2)
      background-position: 47px 0%
    +phone
      background-size: (138px/4) (220px/4)
      background-position: 20px 0%

  &.why-fees
    background: url('#{$site_baseurl}/assets/theme_images/about-us/why-fees.png') no-repeat
    +desktop
      background-size: (204px/2) (184px/2)
      background-position: 35px 0%
    +phone
      background-size: (204px/4) (184px/4)
      background-position: 11px 0%