.kwteam,
.kwteam * {
  box-sizing: border-box;
}

.kwteam {
  width: 100%;
  container-type: inline-size;
}

.kwteam__section {
  margin: 0 0 var(--kw-section-gap, 52px);
}

.kwteam__section:last-child {
  margin-bottom: 0;
}

.kwteam__title {
  position: relative;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: 0 0 14px;
  color: inherit;
  text-align: var(--kw-title-align, center);
  font-family: var(--kw-title-font, inherit);
  font-size: var(--kw-title-size-desktop, 30px);
  font-weight: var(--kw-title-weight, 800);
  line-height: var(--kw-title-line-height, 1.2);
  letter-spacing: var(--kw-title-letter-spacing, .055em);
  text-transform: var(--kw-title-transform, uppercase);
}

.kwteam__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 58px;
  height: 3px;
  border-radius: 999px;
  background: var(--kw-accent, currentColor);
  opacity: .75;
}

.kwteam__title--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.kwteam__title--left::after {
  left: 0;
  transform: none;
}

.kwteam__title--right::after {
  right: 0;
  left: auto;
  transform: none;
}

.kwteam__title--no-divider {
  padding-bottom: 0;
}

.kwteam__title--no-divider::after {
  display: none;
}

.kwteam__grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--kw-grid-max-desktop, 1272px);
  margin-inline: auto;
  justify-content: var(--kw-grid-align, center);
  align-items: start;
  gap: var(--kw-gap, 24px);
}

.kwteam__card {
  display: flex;
  min-width: 0;
  width: min(var(--kw-card-max, 300px), calc((100% - (var(--kw-cols-desktop, 4) - 1) * var(--kw-gap, 24px)) / var(--kw-cols-desktop, 4)));
  max-width: var(--kw-card-max, 300px);
  margin: 0;
  flex: 0 1 auto;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--kw-radius, 14px);
  color: inherit;
  background: color-mix(in srgb, currentColor 5%, transparent);
  text-decoration: none;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.kwteam--shadow .kwteam__card {
  box-shadow: 0 8px 24px rgb(0 0 0 / calc(.10 * var(--kw-shadow, 1)));
}

.kwteam__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kw-ratio, 1 / 1);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.kwteam__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--kw-fit, cover);
  transition: opacity var(--kw-mobile-transition, .24s) ease, transform .35s ease;
}

.kwteam__image--alternate {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.kwteam__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 6px 9px;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  background: rgb(0 0 0 / .72);
  font-family: var(--kw-badge-font, inherit);
  font-size: var(--kw-badge-size-desktop, 12px);
  font-weight: var(--kw-badge-weight, 700);
  line-height: var(--kw-badge-line-height, 1);
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.kwteam__content {
  display: flex;
  min-height: 58px;
  padding: 12px 14px 14px;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.kwteam__name {
  font-family: var(--kw-name-font, inherit);
  font-size: var(--kw-name-size-desktop, 16px);
  font-weight: var(--kw-name-weight, 800);
  line-height: var(--kw-name-line-height, 1.2);
  letter-spacing: var(--kw-name-letter-spacing, 0);
  text-transform: var(--kw-name-transform, none);
}

.kwteam__subtitle {
  opacity: .72;
  font-family: var(--kw-subtitle-font, inherit);
  font-size: var(--kw-subtitle-size-desktop, 14px);
  font-weight: var(--kw-subtitle-weight, 400);
  line-height: var(--kw-subtitle-line-height, 1.3);
  letter-spacing: var(--kw-subtitle-letter-spacing, 0);
}

.kwteam__card:focus-visible {
  outline: 3px solid var(--kw-accent, currentColor);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .kwteam--hover-swap .kwteam__card--has-alt:hover .kwteam__image--default,
  .kwteam--hover-swap .kwteam__card--has-alt:focus-visible .kwteam__image--default,
  .kwteam--hover-swap-lift .kwteam__card--has-alt:hover .kwteam__image--default,
  .kwteam--hover-swap-lift .kwteam__card--has-alt:focus-visible .kwteam__image--default {
    opacity: 0;
  }

  .kwteam--hover-swap .kwteam__card--has-alt:hover .kwteam__image--alternate,
  .kwteam--hover-swap .kwteam__card--has-alt:focus-visible .kwteam__image--alternate,
  .kwteam--hover-swap-lift .kwteam__card--has-alt:hover .kwteam__image--alternate,
  .kwteam--hover-swap-lift .kwteam__card--has-alt:focus-visible .kwteam__image--alternate {
    opacity: 1;
  }

  .kwteam--hover-lift .kwteam__card:hover,
  .kwteam--hover-lift .kwteam__card:focus-visible,
  .kwteam--hover-swap-lift .kwteam__card:hover,
  .kwteam--hover-swap-lift .kwteam__card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgb(0 0 0 / .20);
  }

  .kwteam--hover-lift .kwteam__card:hover .kwteam__image,
  .kwteam--hover-lift .kwteam__card:focus-visible .kwteam__image,
  .kwteam--hover-swap-lift .kwteam__card:hover .kwteam__image,
  .kwteam--hover-swap-lift .kwteam__card:focus-visible .kwteam__image {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kwteam:not([data-reduced-motion="ignore"]) .kwteam__card,
  .kwteam:not([data-reduced-motion="ignore"]) .kwteam__image {
    transition: none;
  }
}

@container (max-width: 900px) {
  .kwteam__grid {
    max-width: var(--kw-grid-max-tablet, 948px);
  }

  .kwteam__card {
    width: min(var(--kw-card-max, 300px), calc((100% - (var(--kw-cols-tablet, 3) - 1) * var(--kw-gap, 24px)) / var(--kw-cols-tablet, 3)));
  }
}

@container (max-width: 620px) {
  .kwteam__section {
    margin-bottom: min(var(--kw-section-gap, 52px), 44px);
  }

  .kwteam__grid {
    max-width: var(--kw-grid-max-mobile, 494px);
    gap: min(var(--kw-gap, 24px), 14px);
  }

  .kwteam__card {
    width: min(var(--kw-card-max, 300px), calc((100% - (var(--kw-cols-mobile, 2) - 1) * min(var(--kw-gap, 24px), 14px)) / var(--kw-cols-mobile, 2)));
    max-width: min(var(--kw-card-max, 300px), 240px);
  }

  .kwteam__content {
    min-height: 52px;
    padding: 10px 9px 12px;
  }

  .kwteam__title { font-size: var(--kw-title-size-mobile, 24px); }
  .kwteam__name { font-size: var(--kw-name-size-mobile, 15px); }
  .kwteam__subtitle { font-size: var(--kw-subtitle-size-mobile, 13px); }
  .kwteam__badge { font-size: var(--kw-badge-size-mobile, 11px); }

  .kwteam__media[data-mobile-alt="alternate"] .kwteam__image--default {
    opacity: 0;
  }

  .kwteam__media[data-mobile-alt="alternate"] .kwteam__image--alternate {
    opacity: 1;
  }
}

@container (max-width: 330px) {
  .kwteam__card {
    width: min(var(--kw-card-max, 300px), 280px);
    max-width: min(var(--kw-card-max, 300px), 280px);
  }
}

/* Mobile image behaviour */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .kwteam[data-mobile-mode="default"] .kwteam__image--default,
  .kwteam[data-mobile-mode="preview_once"] .kwteam__image--default,
  .kwteam[data-mobile-mode="preview_repeat"] .kwteam__image--default,
  .kwteam[data-mobile-mode="press"] .kwteam__image--default {
    opacity: 1;
  }

  .kwteam[data-mobile-mode="default"] .kwteam__image--alternate,
  .kwteam[data-mobile-mode="preview_once"] .kwteam__image--alternate,
  .kwteam[data-mobile-mode="preview_repeat"] .kwteam__image--alternate,
  .kwteam[data-mobile-mode="press"] .kwteam__image--alternate {
    opacity: 0;
  }

  .kwteam[data-mobile-mode="alternate"] .kwteam__image--default,
  .kwteam__card--mobile-alt .kwteam__image--default {
    opacity: 0;
  }

  .kwteam[data-mobile-mode="alternate"] .kwteam__image--alternate,
  .kwteam__card--mobile-alt .kwteam__image--alternate {
    opacity: 1;
  }

  .kwteam[data-mobile-mode="press"] .kwteam__card--has-alt:active .kwteam__image--default {
    opacity: 0;
  }

  .kwteam[data-mobile-mode="press"] .kwteam__card--has-alt:active .kwteam__image--alternate {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kwteam[data-reduced-motion="default"] .kwteam__image--default { opacity: 1 !important; }
  .kwteam[data-reduced-motion="default"] .kwteam__image--alternate { opacity: 0 !important; }
  .kwteam[data-reduced-motion="alternate"] .kwteam__image--default { opacity: 0 !important; }
  .kwteam[data-reduced-motion="alternate"] .kwteam__image--alternate { opacity: 1 !important; }
}
