<div class="container">
  <div class="columns text-center">
    <div class="col">
      <img src="https://assets.codepen.io/308367/image-01.jpg" class="rounded"/>
      <h3>Feature Name</h3>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione fugiat atque libero, unde consequuntur aspernatur?</p>
    </div>
    <div class="col">
      <img src="https://assets.codepen.io/308367/image-02.jpg" class="rounded"/>
      <h3>Feature Name</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="col">
      <img src="https://assets.codepen.io/308367/image-03.jpg" class="rounded"/>
      <h3>Feature Name</h3>
      <p>Excepturi ipsa quasi olor sit amet consectetur, adipisicing elit. Autem obcaecati voluptatum quas, dolore aperiam error aliquam consequatur quam aliquid, eum rerum placeat earum laudantium excepturi, quidem distinctio! Cum, ut repellendus. ut quo illo in velit architecto alias, deserunt facilis corrupti, earum tempora?</p>
    </div>

  </div>
.columns {
  display: flex;
}

/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE TUTORIAL
============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {  
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #F7F7FF;
  --clr-gradient: linear-gradient(-90deg, var(--clr-primary), var(--clr-secondary));
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson,sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}

body {
  min-height: 100vh;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
}

.container {
  width: min(95%, 45rem);
  margin: 0 auto;
}

.rounded {
  max-width: 6rem;
  border-radius: .75rem;
}

.text-center {
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.