mobile friendly feature list

by Soviut

HTML

<div class="feature">
  <div class="feature__title">
    This is a feature
  </div>
  
  <div class="checkmarks">
    <div class="checkmark">
      <div class="checkmark__icon">✓</div>
      <div class="checkmark__label">First column </div>
    </div>

    <div class="checkmark">
      <div class="checkmark__icon">✓</div>
      <div class="checkmark__label">First column </div>
    </div>

    <div class="checkmark">
      <div class="checkmark__icon">✓</div>
      <div class="checkmark__label">First column </div>
    </div>
  </div>
</div>

<div class="feature">
  <div class="feature__title">
    Another feature here
  </div>
  
  <div class="checkmarks">
    <div class="checkmark">
      <div class="checkmark__icon">✓</div>
      <div class="checkmark__label">First column </div>
    </div>

    <div class="checkmark">
      <div class="checkmark__icon">✓</div>
      <div class="checkmark__label">First column </div>
    </div>

    <div class="checkmark">
      <div class="checkmark__icon">✓</div>
      <div class="checkmark__label">First column </div>
    </div>
  </div>
</div>

SCSS

body {
  font-family: arial, helvetica, san-serif;
}

.feature {
  margin-bottom: 20px;

  &__title {
    text-align: center;
    font-weight: bold;
  }
}

.checkmarks {
  display: flex;
  justify-content: center;
}

.checkmark {
  padding: 5px;

  &__icon {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
  }
  
  &__label {
    font-size: 0.8em;
  }
}