.w-80 {
  max-width: 80rem;
}

/* ==== VOICE SEARCH SUMMARY ==== */

.talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 3) {
  display: none;
}

.talents .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

@media (width <= 1400px) {
  .talents .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  }

  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 4) {
    display: none;
  }

  .card-cta {
    min-height: 6rem;
  }
}

@media (width <= 1200px) {
  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 4) {
    display: none;
  }
}

@media (width <= 992px) {
  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 5) {
    display: none;
  }
}

@media (width <= 768px) {
  .talents .card-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(clamp(6rem, -3rem + 25.2632vw, 9rem), 1fr)
    );
  }

  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 5) {
    display: block;
  }

  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 3) {
    display: none;
  }

  .card-cta {
    min-height: clamp(6rem, -3rem + 25.2632vw, 9rem);
    grid-column: span 2;
  }
}

@media (width <= 576px) {
  .talents .card-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(clamp(6rem, 4.061rem + 8.1641vw, 7rem), 1fr)
    );
  }

  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 8) {
    display: block;
  }

  .card-cta {
    min-height: clamp(6rem, 4.061rem + 8.1641vw, 7rem);
    grid-column: 1 / -1;
  }
}

@media (max-width: 468px) {
  .talents .card-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(clamp(5rem, 4.7222rem + 4.4444vw, 6rem), 1fr)
    );
  }

  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 5) {
    display: block;
  }

  .talents .card-grid > .speakerpicture-wrapper:nth-last-child(-n + 3) {
    display: none;
  }

  .card-cta {
    min-height: clamp(5rem, 4.7222rem + 4.4444vw, 6rem);
    grid-column: 1 / -1;
  }
}

.speakerpicture-wrapper {
  border: var(--frame) solid var(--bs-emphasis-color);
  position: relative;
  transition-duration: calc(var(--speed) * 4);
  transition-timing-function: var(--ease-out);

  overflow: hidden;
  border-radius: calc(var(--radius) / 1.5);
}

.speakerpicture-wrapper img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
  /* will-change: filter, background-color, transform, opacity; */
  filter: grayscale(1) invert(0.05) brightness(1) contrast(1);
  mix-blend-mode: multiply;
  opacity: 1;
  position: relative;

  transition-property: filter, background-color, transform, opacity;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease-out);
}

.speakerpicture-wrapper::before {
  background-color: var(--bs-secondary);
  bottom: 0;
  content: "";
  left: 0;
  mix-blend-mode: screen;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;

  transition-property: filter, background-color, transform, opacity, border;
  transition-duration: calc(var(--speed) * 4);
  transition-timing-function: var(--ease-in-snap);
}

.speakerpicture-wrapper:hover {
  background-color: var(--bs-primary);

  transition-property: background-color, border;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease-in-snap);
}

.speakerpicture-wrapper:hover::before {
  opacity: 1;

  transition-property: filter, background-color, transform, opacity, border;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease-in-snap);
}

.speakerpicture-wrapper img {
  opacity: 1;
  filter: grayscale(1) invert(0.05) brightness(1) contrast(1);
}

.speakerpicture-wrapper:hover img {
  opacity: 1;
  filter: grayscale(1) invert(0.05) brightness(1) contrast(1);
}

a.speakerpicture {
  height: 100%;
  display: block;
}

/* ==== ACTOR PROFILE ==== */

.actor {
  padding-block: calc(var(--section-margins) / 2);
}

.speakerpicture {
  display: flex;
}

.speakerpicture a {
  align-self: center;
  height: 100%;
}

a.speakerpicture img {
  aspect-ratio: 1 / 1;
  overflow-clip-margin: unset;
  overflow: clip;
  object-fit: cover;
  height: 100%;

  filter: grayscale(1) invert(0.05) brightness(1) contrast(1);
}

.actor-list-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Actor item card container */

:root {
  --card-padding: max(var(--gap), 1.5rem);
}

.actor-card {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--nav-item-gap) + 1vw) !important;

  background-color: color-mix(in srgb, var(--bs-secondary-bg), white 30%);
  width: 100%;
  height: fit-content;
  min-width: 16rem;
  max-width: 80rem;

  box-shadow: var(--bs-box-shadow-sm);

  /* FOR PADDING VERSION */
  padding-inline: var(--card-padding);
  padding-block: var(--card-padding);
  margin-block: calc(var(--gap) / 2);
  transition-property: background-color;
  transition-duration: calc(var(--speed) * 4);
  transition-timing-function: var(--ease-out);
  border-radius: calc(var(--radius) / 1.5);
}

.actor-card:hover {
  background-color: color-mix(in srgb, var(--bs-secondary-bg), black 5%);
  transition-property: background-color;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease-in-snap);
}

/* Image and button section */

.actor-card-image-container {
  position: relative;
  min-width: 64px;
  max-width: 256px;
  aspect-ratio: 1 / 1;
  overflow-clip-margin: unset;
  overflow: hidden;
  object-fit: cover;
  flex: 1 1 8rem;
  transition-property: margin-block-start;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease-in);
}

.actor-card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow-clip-margin: unset;
  filter: grayscale(1) invert(0.1) brightness(1.1) contrast(0.95);
  border-radius: calc(var(--radius) / 2);
}

.tag {
  font-size: var(--fs-3xs);
  border-radius: calc(var(--border) / 2);
  height: fit-content;
  font-weight: 100;
  font-variation-settings: "wght" calc(var(--font-weight) - 50);
  line-height: 1.5;
  padding-block: calc(var(--border) / 2);
}

.recent {
  background-color: #d1c4e9;
  color: #3f51b5;
}

.actor-card-image-container {
  .request-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(3rem);
    white-space: nowrap;
    bottom: calc(var(--gap) / 2);
    z-index: 20;

    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: calc(var(--speed) * 1.5);
    pointer-events: all;
  }

  .extras {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    z-index: 10;
  }

  & > div:last-child {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    top: 0;
    pointer-events: none;
  }
}

.actor-card:hover,
.actor-card:focus-within {
  .actor-card-image-container .request-button {
    transform: translateX(-50%) translateY(0rem);
    opacity: 1;
  }
}

/* Card content */
.actor-card-content {
  flex: 1 1 0;
  min-width: 14rem;
  padding-block-start: calc(var(--gap) * 1);
}

.actor-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.actor-card-header a {
  text-decoration: none;
  color: var(--bs-emphasis-color);
}

.actor-card-header a:hover {
  color: var(--bs-link-color);
}

.actor-card-title {
  width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.4;
}

.share-link {
  font-size: var(--fs-3xs);
  color: #757575;
  text-decoration: underline;
  cursor: pointer;
  position: relative;
  top: -0.8em;
  font-weight: 100;
  filter: brightness(0.95);
  line-height: 1.3;
  display: inline-flex;
  vertical-align: middle;
  place-items: center;
  align-items: center;

  transition: filter var(--speed) var(--ease-out);
}

.actor-card:hover .share-link {
  filter: brightness(1.05);
}

.share-link:hover {
  filter: brightness(1.3) !important;
}

.actor-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.more {
  color: #888;
}

.save-actor-button {
  white-space: nowrap;
}

.actor-card-sample-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--gap) / 2);

  margin-block-start: calc(var(--gap) * 1);
  min-width: fit-content;

  row-gap: var(--gap);
  align-content: center;
}

.play-button {
  aspect-ratio: 1;
  padding: calc(var(--gap) / 4);
  max-width: fit-content;
}

.actor-card {
  .play-button {
    margin-block-end: calc(var(--gap) / 2.5);
  }
}

.actor-card-toolbox {
  position: absolute;
  padding-inline-end: var(--card-padding);
  padding-block-start: var(--card-padding);

  top: 0;
  right: 0;
}

.quick-filter .cta-heading {
  font-size: calc(var(--fs-xl) * 0.75);
}

.filtered-actor-cards {
  .actor-card:has(.remove-actor-button) {
    background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 30%);
  }

  .actor-card:hover:has(.remove-actor-button) {
    background: color-mix(in srgb, var(--bs-primary), var(--bs-body-color) 10%);
  }

  .filtered-actors {
    transition: opacity var(--speed) var(--ease-in);
  }
}

@media (width <= 576px) {
  .filtered-actor-cards .actor-card-image-container {
    margin-block-start: calc(var(--card-padding) * 1.5);
    margin-inline: calc(var(--card-padding) * 1.5);
    flex: 1 1 12rem;
  }

  .actor-card-toolbox {
    padding: calc(var(--card-padding) / 2);
  }
}

.actor-card-bio {
  padding-block-start: calc(var(--gap) / 1.5);
  font-size: var(--fs-2xs);
}