html > body > #grid .banner {
  /** Required arguments with purportedly ridiculous defaults */
  --element-gap: 1000px;
  --element-background: red;
  --element-shadow-size: 200px;

  /** Optional arguments with sensible defaults */
  --element-border-radius: none;

  width: fit-content;
  display: grid;
  padding: var(--element-gap);
  gap: var(--element-gap);
  grid-template-rows: min-content 1fr;
  grid-template-columns:
    [icon-start]
      min-content
    [icon-end contents]
      1fr
    [contents-end]
  ;
  background: var(--element-background);
  border-radius: var(--element-border-radius);
  box-shadow:
    0 calc(-1 * var(--element-shadow-size)) color-mix(in oklab, var(--element-background), #fff),
    var(--element-shadow-size) 0 color-mix(in oklab, var(--element-background), #aaa),
    0 var(--element-shadow-size) color-mix(in oklab, var(--element-background), #777),
    calc(-1 * var(--element-shadow-size)) 0 color-mix(in oklab, var(--element-background), #000)
  ;

  > * {
    grid-column: contents;
    text-align: start;
  }

  &:not(:empty)::before {
    grid-column: icon;
    grid-row: 1 / -1;
    font-size: xx-large;
    align-self: center;
    color: inherit;
  }
}