<main>
<div class="infographic">
  <h1 class="infographic__title">Health Benefits of Volunteering</h1>
  <div class="infographic__grid">
    <div class="infographic__grid__item">
      <img
        src="https://www.desertfinancial.com/-/media/desert-financial/lc-test/infographics/infographic__benefitsofvolunteering_1.ashx?la=en&amp;hash=C1249414ECBA01627CC52D44918BDA0ADDE56204"
        class="infographic__grid__item__img">
      <h2 class="infographic__grid__item__title title-dkblue">76%</h2>
      <p class="infographic__grid__item__p">felt physically healthier</p>
    </div>
    <!---->
    <div class="infographic__grid__item">
      <img
        src="https://www.desertfinancial.com/-/media/desert-financial/lc-test/infographics/infographic__benefitsofvolunteering_2.ashx?la=en&amp;hash=4DDF33EF7D6DD3FFD5A90440A810EED04D06D55F"
        class="infographic__grid__item__img">
      <h2 class="infographic__grid__item__title title-orange">94%</h2>
      <p class="infographic__grid__item__p">said volunteering improves their mood</p>
    </div>
    <!---->
    <div class="infographic__grid__item">
      <img
        src="https://www.desertfinancial.com/-/media/desert-financial/lc-test/infographics/infographic__benefitsofvolunteering_3.ashx?la=en&amp;hash=C7857E1920E916D93748F255CFD8D4BCFFA170B7"
        class="infographic__grid__item__img">
      <h2 class="infographic__grid__item__title title-ltblue">78%</h2>
      <p class="infographic__grid__item__p">felt less stressed</p>
    </div>

  </div>
  <p class="infographic__sources"><strong>Sources:</strong></p>
  <p class="infographic__sources">my.happyify.com: UnitedHealth Group survey of volunteers</p>
</div>
</main>
* {
  font-family: sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
main {
  max-width: 800px;
  margin: auto;
}
/*INFORGRAPHIC*/
.infographic {
  margin: 32px 0;
}
.infographic__title {
  color: #545454;
  font-size: 20px;
  text-transform: uppercase !important;
  text-align: center;
}
.infographic__grid {
  display: flex;
  margin: 40px 0;
}
.infographic__grid__item {
  width: calc(33.33% - 16px);
  padding: 18px;
}
.infographic__grid__item__img {
  display: block;
  margin: auto;
  width: 175px;
}
.infographic__grid__item__title {
  font-size: 30px;
  font-weight: 600;
  text-align: center !important;
  width: 100%;
  margin: 0;
}
.title-dkblue {
  color: #00bce4 !important;
}
.title-orange {
  color: #fe8d0b !important;
}
.title-ltblue {
  color: #003A79 !important;
}
p.infographic__grid__item__p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  display: block;
}
/*...infographic sources*/
p.infographic__sources {
  color: #545454;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

@media screen and (max-width: 695px) {
  .infographic__grid {
    flex-direction: column;
  }
  .infographic__grid__item {
    width: calc(100% - 16px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.