.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);

  max-width: 65rem;

  @include breakpoint("medium") {
    grid-template-areas:
      "header header"
      "featured-content links";
    grid-template-columns: 1fr 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);
      }
    }
    > .content-description > *:first-child {
      margin-top: 0;
    }
  }

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

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

    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);
  }
}