@layer components {
  .marketing__cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  .marketing__cta--on-hero {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
  }

  .marketing__cta--on-hero:hover,
  .marketing__cta--on-hero:focus-visible {
    color: #fff;
    background: color-mix(in srgb, white 16%, transparent);
  }

  .marketing-page__figure {
    margin: var(--space-8) auto;
    max-width: 52rem;
  }

  .marketing-page__figure-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--color-border);
  }

  .marketing-page__related {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-8);
  }

  .marketing-page__related a {
    color: var(--color-text);
    font-weight: 600;
  }

  .marketing__feature--link {
    display: block;
    height: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
  }

  .marketing__feature--link:hover h3 {
    text-decoration: underline;
  }
}