.c-teaser {
  --flow-space: var(--space-2xs);
  --slat-gap: var(--space-l);
}

.c-teaser h2 {
  font-size: max(1.44rem, min(calc(1.29rem + 0.71vw), 1.95rem));
  font-size: var(--step-2);
}

.c-teaser--type{
  color: #CF0072;
  color: var(--accent-1);
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-brand);
  font-weight: 600;
}

/* Bulletin article teasers show the edition's front cover beside the snippet
   text. Only teasers that actually carry a cover get the modifier class, so
   every other WR post teaser keeps its original block layout. The cover is
   given a fixed track width rather than sizing to the source image, so a
   large upload cannot crowd out the text. */
.c-teaser--body--with-cover {
  display: flex;
  flex-direction: column;
  gap: max(1.50rem, min(calc(1.39rem + 0.52vw), 1.88rem));
  gap: var(--space-m);
}

.c-teaser--cover img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 990px) {
  .c-teaser--body--with-cover {
    flex-direction: row;
    align-items: flex-start;
  }

  .c-teaser--body--with-cover .c-teaser--cover {
    flex: 0 0 auto;
    width: 10rem;
  }

  .c-teaser--body--with-cover .c-prose {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* The hero library carries the full-page version of this label but is not
   loaded on listing pages, so teasers style it here. The hero's white
   background exists only to lift the label off the hero image and is
   dropped on the plain teaser background. */
.c-teaser .c-subscription-label span {
  color: #201C40;
  color: var(--color-deep-purple);
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-brand);
  font-weight: 700;
}

.c-teaser--nation,
.c-teaser--date {
  font-weight: 500;
}

.c-teaser--nation {
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
}

.c-card-teaser {
  background: #201C40;
  background: var(--color-deep-purple);
  color: #FFF;
  color: var(--color-white);
  height: 100%;
  max-width: 30rem;
}

.c-card-teaser.card-hover {
  background: #FFA902;
  background: var(--color-yellow);
  color: #201C40;
  color: var(--color-deep-purple);
}

.c-card-teaser h3 a {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c-card-teaser h3 a:hover {
    /*text-decoration: underline;*/
    color: inherit;
  }

.c-card-teaser--type{
  color: #FFA902;
  color: var(--color-yellow);
  font-family: 'Poppins', sans-serif;
  font-family: var(--font-brand);
  font-weight: 600;
}

.card-hover .c-card-teaser--type {
  color: inherit;
}

.field--name-course-event-date-text,
.c-card-teaser--date {
  font-weight: 500;
}

.field--name-course-event-other-dates {
  font-size: max(0.83rem, min(calc(0.79rem + 0.23vw), 1.00rem));
  font-size: var(--step--1);
  font-weight: 500;
}