"Our Team" (Front - Responsive)

 HTML

    <!-- NOSSA EQUIPE     -->

    <section>

        <div class="row">

            <div class="d-flex flex-column justify-content-center mt-5">

                <div class=" section-title text-start">

                    <h2 class="mb-0 pb-0 text-center" style="font-size: 25px">

                        <strong>Nossa Equipe</strong>

                    </h2>

                </div>

            </div>

            <div class="our-team-container">

                <div class="col-md-3">

                    <div class="our-team">

                        <div class="pic">

                            <img src="../../../assets-web/img/profile/jorge-oliveira.png">

                        </div>

                        <h5 class="title">Jorge Oliveira</h5>

                        <span class="post">Secretário do Ambiente e Saneamento</span>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <!-- NOSSA EQUIPE  FIM   -->

CSS

/**************/

/*NOSSA EQUIPE*/

/**************/

.our-team-container{

  display: flex;

  flex-direction: row;

  justify-content: center;

}

.our-team{

  padding: 20px 15px 30px;

  text-align: center;

}

.our-team:hover{

  transition: .5s;

}

.our-team .pic{

  display: inline-block;

  width: 100%;

  height: 100%;

  padding: 5px;

  margin-bottom: 25px;

  transition: all 0.5s ease 0s;

  border-radius: 50%;

}

.our-team:hover .pic{

  background: #1DBF73;

  border-radius: 50%;

}

.our-team .title{

  display: block;

  font-size: 20px;

  font-weight: 600;

  margin: 0 0 7px 0;

}

.our-team .post{

  display: block;

  font-size: 15px;

  text-transform: capitalize;

  margin-bottom: 15px;

}

@media only screen and (max-width: 995px){

  .our-team{ margin-bottom: 30px; }

}