@layer molecules {
  .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 {
    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 (max-width: 991.98px) {
    .event-card {
      gap: var(--sm-2);
      border-color: var(--card-hover-border);
      box-shadow: var(--card-hover-card-shadow-offset) var(--card-hover-card-shadow-offset) var(--card-hover-card-shadow-blur) var(--card-hover-card-shadow-colour);
    }
    .event-card .color-title,
    .event-card .color-utility,
    .event-card .color-icon,
    .event-card .cta {
      color: var(--card-hover-fg);
    }
    .event-card .cta__label, .event-card .cta__icon {
      color: var(--card-hover-fg);
    }
    .event-card__cta {
      border-top-color: var(--card-hover-fg);
    }
    .event-card.surface-card:hover, .event-card.surface-card:focus-within {
      background-color: var(--card-bg);
    }
  }
  @media (min-width: 992px) {
    .event-card {
      min-height: 36rem;
      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:focus-within .color-title,
    .event-card:focus-within .color-utility,
    .event-card:focus-within .color-icon,
    .event-card:focus-within .cta {
      color: var(--card-hover-fg);
    }
    .event-card:hover .cta__label, .event-card:hover .cta__icon, .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);
  }
}