.dynamic-content {
  $component-name: ".dynamic-content";
  $padding: -1;

  @include set-colors("background-secondary", $rewrite-css-vars: true);

  display: grid;
  grid-template-areas:
    "header"
    "featured-content"
    "links";
  align-items: start;
  gap: spacing($padding);
  padding: spacing($padding) spacing($page-padding-side);

  @include breakpoint("wide") {
    grid-template-areas:
      "header header"
      "featured-content links";
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  > h3 {
    grid-area: header;
    margin: 0;
    position: relative;
    top: spacing(-4);
  }

  &__featured {
    grid-area: featured-content;
    display: flex;
    flex-direction: column;
    gap: spacing($padding);

    > iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: none;
      display: block;
    }

    > figure {
      margin: 0;
      > img {
        width: 100%;
        aspect-ratio: 16 / 9;
        display: block;
      }
      > figcaption {
        color: var(--color-foreground-secondary);
      }
    }

    > p {
      margin: 0;
      margin-top: spacing($padding, $divideby: -2);
    }

    > .content-description > *:first-child {
      margin-top: 0;
    }
  }

  &__infobox {
    background-color: var(--color-theme-secondary);
    padding: spacing(-2);

    line-height: line-height("single");

    // Any heading level can lead the injected content — drop the first child's
    // top margin so the gap above it equals the container padding (the left gap).
    > *:first-child {
      margin-top: 0;
    }

    // The default text-link knockout shadow is tinted with the surrounding
    // background colour. Inside the infobox the background is theme-secondary,
    // so re-tint the shadow to match — otherwise it shows as a bright halo.
    // The component-name prefix raises specificity above the default
    // `p:not(.links--plain) a` rule so this actually wins the cascade.
    #{$component-name} & a {
      text-shadow: #{link-shadow(5, "theme-secondary")};
    }

    h4 {
      margin-top: 0;
      margin-bottom: spacing(-4);
    }

    ul {
      margin: 0;
      padding-left: 0.5em;

      li {
        margin-bottom: 0;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    p {
      margin: 0;
    }
  }

  &__links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    gap: spacing($padding);
  }
}