html > body > #grid .card {
  /** Required arguments with purportedly ridiculous defaults */
  --element-spacing-meta-x: 100px;
  --element-spacing-meta-y: 100px;
  --element-spacing-contents-x: 100px;
  --element-spacing-contents-y: 100px;
  --element-background-meta: red;
  --element-background-contents: cyan;

  /** Optional arguments with sensible defaults */
  --element-font-title: inherit;
  --element-font-link-note: inherit;
  --element-box-shadow: none;
  --element-border-radius: 0;
  --element-color: inherit;
  --element-link-color: inherit;
  --element-link-color-active: inherit;
  --element-link-color-visited: inherit;

  height: auto;
  border-radius: var(--element-border-radius);
  background: var(--element-background-meta);
  color: var(--element-color);

  word-break: break-word;

  &, > div {
    display: flex;
    gap: var(--element-spacing-meta-y);
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  & > *:first-child:not(div) {
    padding-top: var(--element-spacing-meta-y);
  }

  & > *:last-child:not(div) {
    padding-bottom: var(--element-spacing-meta-y);
  }

  & a {
    color: var(--element-link-color);

    &:visited {
      color: var(--element-link-color-visited);
    }

    &:hover {
      color: var(--element-link-color-active);
    }
  }

  > blockquote,
  > p {
    margin-inline: var(--element-spacing-meta-x);
  }

  > div {
    padding-block: var(--element-spacing-contents-y);
    gap: var(--element-spacing-contents-y);
    background: var(--element-background-contents);
    border-radius: var(--element-border-radius);
    box-shadow: var(--element-box-shadow);
    width: 100%;

    > h2,
    > h3,
    > p,
    > .section-compact,
    > blockquote {
      margin-inline: var(--element-spacing-contents-x);
    }

    > h2,
    > h3 {
      font: var(--element-font-title);
    }

    > h2 {
      font-size: x-large;
    }

    > .article {
      --element-padding-inline: var(--element-spacing-contents-x);
      width: 100%;
    }
  }

  > * {
    flex-basis: 100%;
  }

  > aside,
  > nav {
    display: flex;
    gap: var(--element-spacing-meta-x);
    flex-wrap: wrap;
    flex: 0 0 100%;
    padding-inline: var(--element-spacing-meta-x);
  }

  > aside {
    justify-content: end;
    font: var(--element-font-link-note);
    font-size: smaller;
  }
}