@layer molecules {
  .profile-card {
    max-width: 80rem;
    overflow: hidden;
  }
  .profile-card::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 3.3rem;
    z-index: -1;
    margin: 0 auto;
    border-inline-start: 18px solid transparent;
    border-inline-end: 18px solid transparent;
    border-top: 24px solid var(--card-hover-bg);
    transition: 0.5s ease-in-out;
  }
  .profile-card__card-link {
    transition: all 0.3s ease-in-out;
    min-height: auto;
    cursor: pointer;
  }
  .profile-card__card-link .cta {
    margin-top: var(--sm-2);
  }
  .profile-card__card-link:hover, .profile-card__card-link:focus-within {
    text-decoration: none;
    border-color: var(--card-hover-border);
  }
  .profile-card__card-link:hover .color-title,
  .profile-card__card-link:hover .color-display,
  .profile-card__card-link:hover .color-headline,
  .profile-card__card-link:hover .color-body,
  .profile-card__card-link:hover .color-pre-heading, .profile-card__card-link:focus-within .color-title,
  .profile-card__card-link:focus-within .color-display,
  .profile-card__card-link:focus-within .color-headline,
  .profile-card__card-link:focus-within .color-body,
  .profile-card__card-link:focus-within .color-pre-heading {
    color: var(--card-hover-fg);
  }
  .profile-card__card-link:hover .surface-card.card-bg .cta,
  .profile-card__card-link:hover .surface-card.card-bg .cta__label,
  .profile-card__card-link:hover .surface-card.card-bg .cta__icon, .profile-card__card-link:focus-within .surface-card.card-bg .cta,
  .profile-card__card-link:focus-within .surface-card.card-bg .cta__label,
  .profile-card__card-link:focus-within .surface-card.card-bg .cta__icon {
    color: var(--ui-buttons-link-text);
  }
  .profile-card__card-link:hover .profile-card__cta-wrapper, .profile-card__card-link:focus-within .profile-card__cta-wrapper {
    margin-top: var(--sm-2);
    max-height: 80px;
  }
  .profile-card__card-link:hover .profile-card__cta-wrapper .cta::after, .profile-card__card-link:focus-within .profile-card__cta-wrapper .cta::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    content: "";
    transform: translate(-50%, -50%);
  }
  .profile-card__card-link:hover .profile-card__cta-wrapper .cta__label, .profile-card__card-link:focus-within .profile-card__cta-wrapper .cta__label {
    text-decoration: none;
  }
  .profile-card__card-link:hover .profile-card__content, .profile-card__card-link:focus-within .profile-card__content {
    background-color: var(--card-hover-bg);
  }
  @media (hover: hover) and (pointer: fine) {
    .profile-card__card-link:hover .profile-card__content .cta--text-link  {
      text-decoration : underline;
    }
  }
  .profile-card__card-link:focus-within {
    box-shadow: 0 0 0 2px var(--card-border-colour);
  }
  .profile-card__image {
    max-height: 32rem;
  }
  .profile-card__cta-wrapper {
    max-height: 0;
    transition: all 0.3s ease-in-out;
  }
  .profile-card__content {
    flex: 1;
    bottom: 0;
    transition: all 0.6s ease-in-out;
  }
  .profile-card--visible {
    text-decoration: none;
  }
  .profile-card--visible::after {
    bottom: -23px;
  }
  .profile-card--visible .profile-card__card-link .color-title,
  .profile-card--visible .profile-card__card-link .color-display,
  .profile-card--visible .profile-card__card-link .color-headline,
  .profile-card--visible .profile-card__card-link .color-body,
  .profile-card--visible .profile-card__card-link .cta,
  .profile-card--visible .profile-card__card-link .cta__label,
  .profile-card--visible .profile-card__card-link .cta__icon {
    color: var(--card-active-fg);
  }
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-title,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-display,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-headline,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-body,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .cta,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .cta__label,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .cta__icon, .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-title,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-display,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-headline,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-body,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .cta,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .cta__label,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .cta__icon {
    color: var(--card-active-fg);
  }
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-title:hover,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-display:hover,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-headline:hover,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .color-body:hover,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .cta:hover,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .cta__label:hover,
  .profile-card--visible .profile-card__card-link:hover .surface-card.card-bg .cta__icon:hover, .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-title:hover,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-display:hover,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-headline:hover,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .color-body:hover,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .cta:hover,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .cta__label:hover,
  .profile-card--visible .profile-card__card-link:focus-within .surface-card.card-bg .cta__icon:hover {
    color: var(--card-active-fg);
  }
  .profile-card--visible .profile-card__card-link:hover .profile-card__content, .profile-card--visible .profile-card__card-link:focus-within .profile-card__content {
    background-color: var(--card-active-bg);
  }
  .profile-card--visible .profile-card__content {
    background-color: var(--card-active-bg);
  }
  .profile-card--visible .profile-card__cta-wrapper {
    margin-top: var(--sm-2);
    max-height: 8rem;
  }
  .profile-card--visible .profile-card__cta-wrapper .cta__label {
    text-decoration: none;
  }
  .profile-card__image-wrapper {
    height: 24rem;
  }
  @media (min-width: 992px) {
    .profile-card__image-wrapper {
      height: 32rem;
    }
  }
  .profile-detail__close {
    font-size: var(--icon-m);
    line-height: var(--icon-m);
    cursor: pointer;
    background: transparent;
    padding: 0;
  }
  .profile-detail__image-wrapper {
    min-height: 24.6rem;
    max-width: 29.8rem;
  }
  @media (min-width: 768px) {
    .profiles [class*=col-] .profile-detail--visible {
      margin-top: var(--sm-3);
      width: calc(100% + 33.2rem);
    }
    .profiles [class*=col-]:nth-child(2n) .profile-detail {
      inset-inline-start: calc(-100% - 1.6rem);
    }
  }
  @media (min-width: 992px) {
    .profiles [class*=col-] .profile-detail--visible {
      width: calc(100% + 45.4rem);
    }
    .profiles [class*=col-]:nth-child(2n) .profile-detail {
      inset-inline-start: calc(-100% - 3.5rem);
    }
  }
  @media screen and (orientation: landscape) and (min-width: 1025px) {
    .profiles [class*=col-] .profile-detail--visible {
      width: calc(100% + 53.3rem);
    }
    .profiles [class*=col-]:nth-child(3n+2) .profile-detail {
      inset-inline-start: calc(-100% - 3.4rem);
    }
  }
  @media (min-width: 1200px) {
    .profiles [class*=col-] .profile-detail--visible {
      width: calc(300% + 6.4rem);
    }
    .profiles [class*=col-]:nth-child(2n) .profile-detail {
      inset-inline-start: 0px;
    }
    .profiles [class*=col-]:nth-child(3n+2) .profile-detail {
      inset-inline-start: calc(-100% - 3.4rem);
    }
    .profiles [class*=col-]:nth-child(3n) .profile-detail {
      inset-inline-start: calc(-200% - 6.4rem);
    }
  }
  @media (min-width: 1400px) {
    .profile-detail__close {
      top: 4.1rem;
      inset-inline-end: 4.1rem;
    }
  }
  .media-card__wrapper {
    border: calc(var(--card-border-weight) * 1px) solid var(--card-border-colour);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: 0 var(--card-shadow-offset) var(--card-shadow-blur) 0 var(--card-shadow-colour);
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  .media-card__wrapper:hover {
    border-color: var(--card-hover-border);
    box-shadow: 0 var(--card-hover-card-shadow-offset) var(--card-hover-card-shadow-blur) 0 var(--card-hover-card-shadow-colour);
  }
  .media-card__wrapper:hover .media-card__body {
    background-color: var(--card-hover-bg);
    color: var(--card-hover-fg);
  }
  .media-card__wrapper:hover .media-card__body .color-title,
  .media-card__wrapper:hover .media-card__body .color-headline,
  .media-card__wrapper:hover .media-card__body .color-body {
    color: var(--card-hover-fg);
  }
  .media-card__wrapper:hover .cta {
    color: var(--card-hover-fg);
  }
  .media-card__wrapper:hover .cta__label {
    text-decoration: none;
    color: var(--card-hover-fg);
  }
  .media-card__wrapper:hover .cta__icon {
    color: var(--card-hover-fg);
  }
  .media-card__img-wrapper {
    height: 30rem;
    overflow: hidden;
  }
  .media-card__bg-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .media-card__body {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }
  .media-card__cta-wrapper {
    transition: all 0.3s ease-in-out;
  }
  .media-card__cta-wrapper .cta--text-link:hover .cta__label {
    color: var(--card-hover-fg);
  }
  .event-card {
    min-height: 36rem;
    max-width: 60rem;
    transition: all 0.3s ease-in-out;
    width: 100%;
    border: solid calc(var(--card-border-weight) * 1px) var(--card-border-colour);
  }
  .event-card__cta {
    border-top: 0.1rem solid var(--general-dividers);
  }
  @media (min-width: 992px) {
    .event-card {
      transition: all 0.3s linear;
    }
    .event-card__cta-wrapper {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.5s ease;
    }
    .event-card:hover, .event-card:focus-within {
      background-color: var(--card-hover-bg);
      border-color: var(--card-hover-border);
    }
    .event-card:hover .color-title,
    .event-card:hover .color-utility,
    .event-card:hover .color-icon,
    .event-card:hover .cta,
    .event-card:hover .cta__label,
    .event-card:hover .cta__icon, .event-card:focus-within .color-title,
    .event-card:focus-within .color-utility,
    .event-card:focus-within .color-icon,
    .event-card:focus-within .cta,
    .event-card:focus-within .cta__label,
    .event-card:focus-within .cta__icon {
      color: var(--card-hover-fg);
    }
    .event-card:hover .event-card__cta-wrapper {
      max-height: 50rem;
      transition: max-height 0.5s ease;
    }
    .event-card:focus-within .event-card__cta-wrapper {
      overflow: visible;
      max-height: 50rem;
      transition: max-height 0.5s ease;
    }
  }
  .results-card {
    border: calc(var(--card-border-weight) * 1px) solid var(--card-border-colour);
    background: var(--card-bg);
    border-radius: var(--card-border-radius);
  }
  .results-card:hover {
    border-color: var(--card-hover-border);
    background-color: var(--card-hover-bg);
  }
}