<div class="card-group">
  <div class="card">
    <h1 class="card--title">Card title</h1>
    <section class="card__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eveniet quia, labore tempora ratione accusamus eum sunt maxime dolor recusandae minus! Ducimus, eum fuga. Repudiandae!</p>
    </section>
    <section class="card__footer">
      <button>Read More</button>
    </section>
  </div>
  <div class="card">
    <h1 class="card--title">Card title</h1>
    <section class="card__content">
      <div class="card__content--stats">
        <ul>
          <li class="subscriber-count">2345</li>
          <li class="yoy">YOY: <strong class="decrease">.4%</strong></li>
          <li class="rgb">RGB: <strong class="increase">10%</strong></li>
        </ul>
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Line_graph.png" alt="graph">
    </section>
  </div>
  <div class="card">
    <h1 class="card--title">Card title</h1>
    <section class="card__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eveniet quia, labore tempora ratione accusamus eum sunt maxime dolor recusandae minus! Ducimus, eum fuga. Repudiandae!</p>
    </section>
    <section class="card__footer">
      <button>Read More</button>
    </section>
  </div>
  
</div>

/* minmax(auto, 57ch) */
* {
  font-family: 'Arial', sans-serif;
}
.card-group {
  display: grid;
/*   grid-template-columns: minmax(1.2rem, 1fr) minmax(1.2rem, 1fr)minmax(1.2rem, 1fr); */
  grid-template-columns: repeat(auto-fit, minmax(1.2rem, 1fr));
  grid-gap: 20px;
}

.card {
  border-radius: 3px;
  box-shadow: 10px 5px 5px #d3d3d3;
  padding: 20px 10px;
}

.card--title {
  text-align: center;
  font-weight: 100;
/*   text-transform: uppercase; */
}

.card__footer {
  text-align: center;
}

button {
  width: 150px;
  padding: 10px;
  border-radius: 10px;
  border: 2px dotted black;
  background-color: white;
  font-size: 14px;
  text-transform: uppercase;
}

ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  align-items: baseline;
  padding: 0;
}

.subscriber-count {
  font-size: 22px; 
  font-weight: 100;
}

.decrease {
  color: red;
}

.increase {
  color: green;
}

img {
  width: 100%;
}