Team

<!-- Team Style 1 -->
<div class="card-hover text-center" style="max-width: 306px;">
  <img src="assets/img/landing/creative-agency/team/02.jpg" class="d-block rounded-5 mb-4" alt="Image">
  <h3 class="h5 mb-1">Alisa Black</h3>
  <p class="text-muted mb-2">Head of marketing</p>
  
  <!-- Visible on hover on screens > 991px -->
  <div class="d-none d-lg-flex nav justify-content-center opacity-0">
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1">
      <i class="ai-instagram"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1">
      <i class="ai-facebook"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal">
      <i class="ai-linkedin"></i>
    </a>
  </div>
  
  <!-- Always visible on screens < 992px -->
  <div class="d-lg-none nav justify-content-center">
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1">
      <i class="ai-instagram"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1">
      <i class="ai-facebook"></i>
    </a>
    <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal">
      <i class="ai-linkedin"></i>
    </a>
  </div>
</div>

// Team Style 1
.card-hover.text-center(style="max-width: 306px;")
  img(src="assets/img/landing/creative-agency/team/02.jpg", alt="Image").d-block.rounded-5.mb-4
  h3.h5.mb-1 Alisa Black
  p.text-muted.mb-2 Head of marketing

  // Visible on hover on screens > 991px
  .d-none.d-lg-flex.nav.justify-content-center.opacity-0
    a(href="#").nav-link.btn.btn-icon.btn-sm.fs-sm.fw-normal.me-1
      i.ai-instagram
    a(href="#").nav-link.btn.btn-icon.btn-sm.fs-sm.fw-normal.me-1
      i.ai-facebook
    a(href="#").nav-link.btn.btn-icon.btn-sm.fs-sm.fw-normal
      i.ai-linkedin
  
  // Always visible on screens < 992px
  .d-lg-none.nav.justify-content-center
    a(href="#").nav-link.btn.btn-icon.btn-sm.fs-sm.fw-normal.me-1
      i.ai-instagram
    a(href="#").nav-link.btn.btn-icon.btn-sm.fs-sm.fw-normal.me-1
      i.ai-facebook
    a(href="#").nav-link.btn.btn-icon.btn-sm.fs-sm.fw-normal
      i.ai-linkedin

<!-- Team Style 2 -->
<div class="card card-hover border-0 rounded-5 overflow-hidden" style="max-width: 416px;">
  <img src="assets/img/landing/corporate/team/01.jpg" alt="Image">
  <div class="position-absolute top-0 start-0 w-100 h-100 opacity-0">
    <div class="bg-dark position-absolute top-0 start-0 w-100 h-100 opacity-50"></div>
    <div class="card-body d-flex flex-column justify-content-end dark-mode h-100 position-relative zindex-2 text-center">
      <h3 class="h5 mb-1">Guy Hawkins</h3>
      <p class="mb-3">Head of marketing</p>
      <div class="d-flex justify-content-center">
        <a href="#" class="btn btn-icon btn-sm btn-light btn-facebook rounded-circle mx-2">
          <i class="ai-facebook"></i>
        </a>
        <a href="#" class="btn btn-icon btn-sm btn-light btn-twitter rounded-circle mx-2">
          <i class="ai-twitter"></i>
        </a>
        <a href="#" class="btn btn-icon btn-sm btn-light btn-linkedin rounded-circle mx-2">
          <i class="ai-linkedin"></i>
        </a>
      </div>
    </div>
  </div>
</div>

// Team Style 2
.card.card-hover.border-0.rounded-5.overflow-hidden(style="max-width: 416px;")
  img(src="assets/img/landing/corporate/team/01.jpg", alt="Image")
  .position-absolute.top-0.start-0.w-100.h-100.opacity-0
    .bg-dark.position-absolute.top-0.start-0.w-100.h-100.opacity-50
    .card-body.d-flex.flex-column.justify-content-end.dark-mode.h-100.position-relative.zindex-2.text-center
      h3.h5.mb-1 Guy Hawkins
      p.mb-3 Head of marketing
      .d-flex.justify-content-center
        a(href="#").btn.btn-icon.btn-sm.btn-light.btn-facebook.rounded-circle.mx-2
          i.ai-facebook
        a(href="#").btn.btn-icon.btn-sm.btn-light.btn-twitter.rounded-circle.mx-2
          i.ai-twitter
        a(href="#").btn.btn-icon.btn-sm.btn-light.btn-linkedin.rounded-circle.mx-2
          i.ai-linkedin

<!-- Team Style 3 -->
<div class="card-hover pb-3" style="max-width: 396px;">
  <div class="position-relative">
    <img src="assets/img/landing/creative-agency/team/06.jpg" alt="Image">
    <div class="d-flex justify-content-center position-absolute start-0 bottom-0 w-100 px-3 mb-4 opacity-0">
      <a href="#" class="btn btn-icon btn-sm btn-light btn-facebook rounded-circle mx-2">
        <i class="ai-facebook"></i>
      </a>
      <a href="#" class="btn btn-icon btn-sm btn-light btn-twitter rounded-circle mx-2">
        <i class="ai-twitter"></i>
      </a>
      <a href="#" class="btn btn-icon btn-sm btn-light btn-behance rounded-circle mx-2">
        <i class="ai-behance"></i>
      </a>
    </div>
  </div>
  <div class="border-bottom pt-4 pb-3">
    <h3 class="h4 mb-2">Edward Jones</h3>
    <span class="fs-lg text-muted">Branding Designer</span>
  </div>
</div>

// Team Style 3
.card-hover.pb-3(style="max-width: 396px;")
  .position-relative
    img(src="assets/img/landing/creative-agency/team/06.jpg", alt="Image")
    .d-flex.justify-content-center.position-absolute.start-0.bottom-0.w-100.px-3.mb-4.opacity-0
      a(href="#").btn.btn-light.btn-icon.btn-sm.btn-facebook.rounded-circle.mx-2
        i.ai-facebook
      a(href="#").btn.btn-light.btn-icon.btn-sm.btn-twitter.rounded-circle.mx-2
        i.ai-twitter
      a(href="#").btn.btn-light.btn-icon.btn-sm.btn-behance.rounded-circle.mx-2
        i.ai-behance
  .border-bottom.pt-4.pb-3
    h3.h4.mb-2 Edward Jones
    span.fs-lg.text-muted Branding Designer

<!-- Team Style 4 -->
<a href="#" class="d-block card-hover text-decoration-none" style="max-width: 416px;">
  <div class="bg-secondary rounded-5 position-relative overflow-hidden">
    <div class="position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center opacity-0" style="background-image: url(assets/img/landing/blog/authors/hover.svg);"></div>
    <img src="assets/img/landing/blog/authors/01.png" class="position-relative zindex-2" alt="Author picture">
  </div>
  <div class="border-bottom pt-4 pb-3">
    <h3 class="h4 mb-1">Jane Cooper</h3>
    <p class="text-muted mb-0">Chief editor</p>
  </div>
</a>

// Team Style 4
a(href="#", style="max-width: 416px;").d-block.card-hover.text-decoration-none
  .bg-secondary.rounded-5.position-relative.overflow-hidden
    .position-absolute.top-0.start-0.w-100.h-100.bg-size-cover.bg-position-center.opacity-0(style="background-image: url(assets/img/landing/blog/authors/hover.svg);")
    img(src="assets/img/landing/blog/authors/01.png", alt="Author picture").position-relative.zindex-2
  .border-bottom.pt-4.pb-3
    h3.h4.mb-1 Jane Cooper
    p.text-muted.mb-0 Chief editor