.jb-team {
  position: relative;
}

.jb-team-stage {
  position: relative;
  width: 350px;
  /* aspect-ratio: 7 / 10; */
  height: 450px;
}

.jb-team-photo {
  position: absolute;
  overflow: hidden;

  background: #fff;
  border-radius: 16px;

  border: 1px solid rgba(0, 0, 0, .06);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .12);

  transition:
    left .35s ease,
    top .35s ease,
    width .35s ease,
    height .35s ease,
    transform .35s ease,
    opacity .35s ease;
}

.jb-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.jb-team-photo--active {
  box-shadow:
    0 0 0 3px var(--bs-primary),
    0 16px 40px rgba(0, 0, 0, .18);
}

.jb-team-caption {
  position: absolute;
  bottom: 35px;
  left: 60px;
  width: 180px;
  background-color: var(--brand-primary);
  z-index: 1000;
  line-height: 1;
  padding: 0.5rem 1rem;
  color: white;
  text-align: center;
  border-radius: 1rem;
}

h3.jb-team-caption__name {
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
  padding: 0;
}

.jb-team-caption__function {
  line-height: 1;
  font-size: 0.85rem;
}

/*
.<div class="">
    <h3 class="jb-team-caption__name">Yves</h3>
    <p class="jb-team-caption__function">Gérant</p>
  </div>

  */