html > body > #grid .article {
  /** Required arguments with purportedly ridiculous defaults */
  --element-gap: 300px;
  --element-cite-font: normal 30px "Comic Sans MS", cursive;
  --element-cite-color: red;

  /** Optional arguments with sensible defaults */
  --element-padding-inline: 0;

  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  gap: var(--element-gap);

  & * {
    max-width: 100%;
    word-break: break-word;
    line-height: calc(100% + var(--element-gap) / 4);
  }

  & cite {
    font: var(--element-cite-font);
    color: var(--element-cite-color);
  }

  > figure {
    > a > picture {
      font-size: 0;

      > img {
        width: 100%;
      }
    }

    > figcaption {
      font-size: smaller;
      padding-inline: var(--element-padding-inline);
    }
  }

  > *:not(figure:has(> a > img, > picture)) {
    padding-inline: var(--element-padding-inline);
  }
}