:root {
  --button-color-outline: var(--color-border-tertiary);
  --button-color-text: var(--color-text-button);
  --button-color-text-hover: var(--color-text-secondary);
  --button-color-background-hover: var(--color-surface-secondary);
  --button-color-highlight-text: var(--button-color-text);
  --button-highlight-background: var(--color-surface-highlight);
  --button-highlight-color-background-hover: var(--button-color-background-hover);
  --button-highlight-color-text-hover: var(--button-color-text-hover);
}

.block__tlb-team {
  display: flex;
  justify-content: center;
  padding: var(--spacing-xl) 0;
  --color-heading: var(--color-text-heading);
  --color-team-heading: var(--color-text-heading);
  --icon-color: var(--color-brand-soft-black);
}
.block__tlb-team.bg-white {
  background: var(--color-surface-primary);
}
.block__tlb-team.bg-green, .block__tlb-team.bg-dark {
  color: var(--color-text-secondary);
  --color-heading: var(--color-text-secondary);
  --color-team-heading: var(--color-text-highlight);
  --button-color-background-hover: var(--color-brand-white);
  --button-color-outline: var(--color-brand-white);
  --button-color-text: var(--color-brand-white);
  --button-color-text-hover: var(--color-text-primary);
  --button-color-highlight-text: var(--color-text-primary);
  --icon-color: var(--color-text-highlight);
}
.block__tlb-team.bg-green {
  background: var(--color-surface-secondary);
}
.block__tlb-team.bg-dark {
  background: var(--color-surface-dark);
}
.block__tlb-team.bg-off-white {
  background: var(--color-surface-tertiary);
}
.block__tlb-team .wrapper {
  width: 100%;
  max-width: var(--container-width);
}
.block__tlb-team .wrapper .intro {
  margin-bottom: var(--spacing-lg);
}
.block__tlb-team .wrapper .intro h3 {
  font: var(--type-b3);
  margin-bottom: var(--spacing-sm);
}
.block__tlb-team .wrapper .intro h2 {
  font: var(--type-h1);
  letter-spacing: -1.28px;
  color: var(--color-heading);
  margin-bottom: var(--spacing-smd);
}
.block__tlb-team .wrapper .intro p {
  font: var(--type-b3);
}
.block__tlb-team .wrapper .team {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  position: relative;
}
.block__tlb-team .wrapper .team .member {
  width: calc((100% - var(--spacing-md) * 2) / 3);
}
.block__tlb-team .wrapper .team .member:hover .media img {
  transform: scale(1.1);
}
.block__tlb-team .wrapper .team .member .media {
  aspect-ratio: 1/1;
  position: relative;
  width: 100%;
  margin-bottom: var(--spacing-smd);
  border-radius: var(--radius-small);
  overflow: hidden;
}
.block__tlb-team .wrapper .team .member .media img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s;
}
.block__tlb-team .wrapper .team .member h4 {
  font: var(--type-b1);
  color: var(--color-team-heading);
}
.block__tlb-team .wrapper .team .member h5 {
  font: var(--type-b4);
  color: var(--color-team-heading);
  margin-bottom: var(--spacing-sm);
}
.block__tlb-team .wrapper .team .member p {
  font: var(--type-b3);
  margin-bottom: var(--spacing-sm);
}
.block__tlb-team .wrapper .team .member ul {
  display: flex;
  gap: var(--spacing-sm);
}
.block__tlb-team .wrapper .team .member ul li a {
  display: block;
  font-size: 0;
  width: 24px;
  height: 24px;
}
.block__tlb-team .wrapper .team .member ul li a svg path {
  fill: var(--icon-color);
}
@media screen and (max-width: 768px) {
  .block__tlb-team {
    padding: var(--spacing-md) 0;
  }
  .block__tlb-team .wrapper .intro {
    margin-bottom: var(--spacing-md);
  }
  .block__tlb-team .wrapper .team .member {
    width: 100%;
  }
}