@layer components {
  .banner {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--banner-color, transparent) 25%, var(--color-canvas)),
      color-mix(in srgb, var(--banner-color, transparent) 45%, var(--color-canvas))
    );
    border-radius: 0.25em;
    color: var(--color-ink);
    display: block;
    padding: var(--block-space-half) var(--block-space);
    text-decoration: none;
  }
}