<div class="wrapper">
   <div class="card-container">
     <article class="card">
       <div class="card--profile"><img src="https://www.bestfunnies.com/wp-content/uploads/2015/05/TOP-30-Cute-Cats-Cute-Cat-30.jpg" alt=""></div>
       <div class="card__text">
         <h3 class="card--header">Mary Jane Perket</h3>
       <div class="separator"></div>
       <p class="card--content">Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sunLorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun</p>
       <div class="card--footer"><button class="btn">Hear me</button></div>
       </div>
       
     </article>
     <article class="card">
       <div class="card--profile"><img src="https://img.huffingtonpost.com/asset/5b7fdeab1900001d035028dc.jpeg?cache=sixpwrbb1s&ops=1910_1000" alt=""></div>
       <div class="card__text">
         <h3 class="card--header">Mary Jane Perket</h3>
       <div class="separator"></div>
       <p class="card--content">Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun</p>
       <div class="card--footer"><button class="btn">Hear me</button></div>
       </div>
     </article>
     <article class="card">
       <div class="card--profile"><img src="https://www.quackit.com/pix/samples/24m.jpg" alt=""></div>
       <div class="card__text">
         <h3 class="card--header">Mary Jane Perket</h3>
       <div class="separator"></div>
       <p class="card--content">Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun sun Lorem Ipsum dolor amet sunLorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun sun Lorem Ipsum dolor amet sunLorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun Lorem Ipsum dolor amet sun</p>
       <div class="card--footer"><button class="btn">Hear me</button></div>
       </div>
     </article>
  </div>
</div>
html {
  font-size: 10px;
}

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FCEEC5;
  font-family: "Raleway", sans-serif;
  font-size: 1.4rem;
}

.card-container {
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-template-rows: a;
  grid-gap: 2rem;
}

.card {
  box-shadow: 0px 2px 10px #D8D9DE;
  background-color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  &__text {
    padding: 10px 20px;
    * {
      margin-top: 10px;
    }
    p {
      // color: #D8E6E5
    }
    .separator {
        width: 50px;
        height: 1px;
        background-color: #AFCAD5;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 10px;
      
      }
    
  }
  button {
    background-color: #FEE005;
    padding: 1rem;
    width: 70%;
    color: white;
    border: transparent;
    border-radius: 100px;
    font-size: 1.4rem;
    text-transform: uppercase;
  }
  &--profile {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}


img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.