responsive testimonial section

What Our Student Says

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, tempore!

      <div class="row">
          <div class="testimonial-col">
              <img src="images/testi1.jpg" alt="">
              <div>
                  <h3>John Smith</h3>

                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, molestias!</p>

                  <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                  <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                  <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                  <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                  <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
              </div>
          </div>

          <div class="testimonial-col">
            <img src="images/testi2.jpg" alt="">
            <div>
                <h3>Emma Amelia</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, molestias!</p>

                <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                <i class="fas fa-star" style="color: #f3ef0e; font-size: 25px;"></i>
                <i class="fas fa-star-half-alt" style="color: #f3ef0e; font-size: 25px;"></i>

            </div>
        </div>

        <div class="testimonial-col">
            <img src="images/testi3.jpg" alt="">
            <div>
                <h3>Mia Sophia</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, molestias!</p>

      </div>

  </section> <!--testimonial end-->

CSS

p{
color: #777;
font-size: 15px;
font-weight: 400;
line-height: 22px;
padding: 10px;
}

h3{
text-align: center;
font-weight: 600;
margin: 20px 0;
}

.testimonial{
width: 80%;
margin: auto;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
background: #fff3f3;
margin: auto;
flex: 20%;
border-radius: 10px;
box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);

}

.testimonial img{
width: 250px;
border-radius: 300px;
cursor: pointer;
margin-top: 35px;
}

@media screen and (max-width: 1032px){
.testimonial{
width: 100%;
margin: auto;
padding-top: 80px;
padding-bottom: 50px;
text-align: center;
margin: auto;
flex: 20%;
}
}