.c-home-featured-challenge {
  padding-block: var(--wa-space-xl);
  padding-inline: var(--wa-space-m);
  background: var(--wr-color-surface-default);

  @media (width >= 64rem) {
    padding-block: var(--wa-space-3xl);
    padding-inline: var(--wa-space-4xl);
  }
}

.c-home-featured-challenge__inner {
  display: grid;
  gap: var(--wa-space-xl);
  width: 100%;
  margin-inline: auto;

  @media (width >= 64rem) {
    grid-template-columns: minmax(0, 1.72fr) minmax(19rem, 0.86fr);
    align-items: start;
    gap: var(--wa-space-2xl);
  }
}

.c-home-featured-challenge__primary,
.c-home-featured-challenge__impact {
  min-width: 0;
}

.c-home-featured-challenge__column-title {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-l);
  line-height: var(--wa-line-height-condensed);
  white-space: nowrap;
}

.c-home-featured-challenge__column-title wa-icon {
  color: var(--wa-color-wr-secondary-70);
}

.c-home-featured-challenge__challenge {
  display: grid;
  gap: var(--wa-space-l);
}

.c-home-featured-challenge__challenge-top {
  display: grid;
  gap: var(--wa-space-l);

  @media (width >= 56rem) {
    grid-template-columns: minmax(15rem, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
}

.c-home-featured-challenge__media {
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: var(--wa-border-radius-m);
  background-color: var(--wr-color-surface-raised);
  background-image: var(--c-home-featured-challenge-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.c-home-featured-challenge__content,
.c-home-featured-challenge__heading {
  justify-content: start;
}

.c-home-featured-challenge__heading {
  gap: var(--wa-space-s);
}

.c-home-featured-challenge__title {
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-xl);
  line-height: var(--wa-line-height-condensed);

  @media (width >= 64rem) {
    font-size: var(--wa-font-size-2xl);
  }
}

.c-home-featured-challenge__lede {
  max-width: 42rem;
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
}

.c-home-featured-challenge__stats {
  display: grid;
  overflow: hidden;
  border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);

  @media (width >= 56rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-home-featured-challenge__stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wa-space-2xs) var(--wa-space-s);
  align-items: center;
  min-width: 0;
  padding: var(--wa-space-s);
  border-block-end: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-quiet);
}

.c-home-featured-challenge__stat:last-child {
  border-block-end: 0;
}

@media (width >= 56rem) {
  .c-home-featured-challenge__stat:not(:nth-child(3n)) {
    border-inline-end: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-quiet);
  }

  .c-home-featured-challenge__stat:nth-last-child(-n + 3) {
    border-block-end: 0;
  }
}

.c-home-featured-challenge__stat wa-icon {
  grid-row: span 2;
  color: var(--wa-color-wr-secondary-70);
  font-size: var(--wa-font-size-xl);
}

.c-home-featured-challenge__stat span {
  color: var(--wr-color-text-muted);
  font-size: var(--wa-font-size-xs);
}

.c-home-featured-challenge__stat strong {
  min-width: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-m);
  line-height: var(--wa-line-height-condensed);
}

.c-home-featured-challenge__footer {
  display: grid;
  gap: var(--wa-space-s);
}

.c-home-featured-challenge__footer p {
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-s);
}

.c-home-featured-challenge__footer a {
  color: var(--wa-color-wr-secondary-70);
  font-weight: var(--wa-font-weight-semibold);
}

.c-home-featured-challenge__action {
  width: 100%;
}

.c-home-featured-challenge__impact {
  gap: var(--wa-space-l);

  @media (width >= 64rem) {
    padding-inline-start: var(--wa-space-2xl);
    border-inline-start: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-quiet);
  }
}

.c-home-featured-challenge__impact-heading {
  gap: var(--wa-space-xs);
}

.c-home-featured-challenge__impact-scope {
  margin: 0;
  color: var(--wa-color-wr-secondary-70);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-semibold);
  line-height: var(--wa-line-height-condensed);
}

.c-home-featured-challenge__impact-intro {
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
}

.c-home-featured-challenge__impact-list {
  display: grid;
  overflow: hidden;
  border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}

.c-home-featured-challenge__impact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--wa-space-s);
  align-items: center;
  min-width: 0;
  padding: var(--wa-space-m);
  border-block-end: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-quiet);
}

.c-home-featured-challenge__impact-row:last-child {
  border-block-end: 0;
}

.c-home-featured-challenge__impact-row wa-icon {
  color: var(--wa-color-wr-secondary-70);
  font-size: var(--wa-font-size-xl);
}

.c-home-featured-challenge__impact-body {
  display: grid;
  min-width: 0;
  gap: var(--wa-space-2xs);
}

.c-home-featured-challenge__impact-body span,
.c-home-featured-challenge__impact-body small {
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-xs);
  line-height: var(--wa-line-height-condensed);
}

.c-home-featured-challenge__impact-body strong {
  overflow-wrap: anywhere;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-m);
  line-height: var(--wa-line-height-condensed);
}
