Team Style 1
<!--====== TEAM STYLE ONE START ======-->
<section class="team-area">
   <div class="container">
      <div class="row">
         <div class="col-lg-3 col-md-6">
            <div class="single-team text-center team-style-one">
               <div class="team-image">
                  <img src="https://cdn.ayroui.com/1.0/images/team/team-1.jpg" alt="Team" />
               </div>
               <div class="team-content">
                  <h4 class="name">Jeffery Riley</h4>
                  <span class="sub-title">Art Director</span>
                  <ul class="social">
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-facebook-filled"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-twitter-original"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-linkedin-original"></i>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
            <!-- single team -->
         </div>
         <div class="col-lg-3 col-md-6">
            <div class="single-team text-center team-style-one">
               <div class="team-image">
                  <img src="https://cdn.ayroui.com/1.0/images/team/team-2.jpg" alt="Team" />
               </div>
               <div class="team-content">
                  <h4 class="name">Riley Beata</h4>
                  <span class="sub-title">Art Director</span>
                  <ul class="social">
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-facebook-filled"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-twitter-original"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-linkedin-original"></i>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
            <!-- single team -->
         </div>
         <div class="col-lg-3 col-md-6">
            <div class="single-team text-center team-style-one">
               <div class="team-image">
                  <img src="https://cdn.ayroui.com/1.0/images/team/team-3.jpg" alt="Team" />
               </div>
               <div class="team-content">
                  <h4 class="name">Kamil Kiwis</h4>
                  <span class="sub-title">Art Director</span>
                  <ul class="social">
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-facebook-filled"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-twitter-original"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-linkedin-original"></i>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
            <!-- single team -->
         </div>
         <div class="col-lg-3 col-md-6">
            <div class="single-team text-center team-style-one">
               <div class="team-image">
                  <img src="https://cdn.ayroui.com/1.0/images/team/team-4.jpg" alt="Team" />
               </div>
               <div class="team-content">
                  <h4 class="name">Kamil Kiwis</h4>
                  <span class="sub-title">Art Director</span>
                  <ul class="social">
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-facebook-filled"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-twitter-original"></i>
                        </a>
                     </li>
                     <li>
                        <a href="javascript:void(0)">
                        <i class="lni lni-linkedin-original"></i>
                        </a>
                     </li>
                  </ul>
               </div>
            </div>
            <!-- single team -->
         </div>
      </div>
      <!-- row -->
   </div>
   <!-- container -->
</section>
<!--====== TEAM STYLE ONE ENDS ======-->
/*===========================
  teams css 
===========================*/
.team-style-one {
  position: relative;
  margin-top: 30px;
  box-shadow: var(--shadow-2);
  border-radius: 8px;
  overflow: hidden;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}
.team-style-one:hover {
  box-shadow: var(--shadow-4);
}
.team-style-one .team-image img {
  width: 100%;
}
.team-style-one .team-content {
  padding: 20px 15px;
  width: 100%;
  background-color: var(--white);
}
.team-style-one .team-content .name {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team-style-one .team-content .name {
    font-size: 20px;
  }
}
.team-style-one .team-content .sub-title {
  font-size: 15px;
  line-height: 24px;
  color: var(--dark-3);
  margin-top: 2px;
  display: block;
}
.team-style-one .team-content .social {
  margin-top: 12px;
}
.team-style-one .team-content .social li {
  display: inline-block;
  margin: 0 4px;
}
.team-style-one .team-content .social li a {
  font-size: 16px;
  color: var(--gray-1);
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border: 1px solid var(--gray-4);
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}
.team-style-one .team-content .social li a:hover {
  background-color: var(--primary);
  color: var(--white);
  border-color: transparent;
}
Team Style 8
Team Style 7
Team Style 5
Team Style 3
Team Style 6
Team Style 2
Team Style 4