html > body > #grid .file {
  /** Required arguments with purportedly ridiculous defaults */
  --element-color-secondary: red;
  --element-gap: 1000px;
  --element-extension-background: red;
  --element-extension-font: italic 100px "Comic Sans MS", cursive;

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

  display: grid;
  gap: var(--element-gap);
  grid-template-rows: min-content 1fr;
  grid-template-columns:
    [extension-start]
      min-content
    [extension-end main-start]
      1fr
    [main-end]
  ;

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

  > aside {
    grid-column: extension;
    grid-row: 1 / -1;
    border-radius: var(--element-border-radius);
    background: var(--element-extension-background);
    color: var(--element-color-secondary);
    font: var(--element-extension-font);
    padding: var(--element-gap);
    align-self: start;
    word-break: keep-all;
  }

  > figcaption {
    word-break: break-word;
  }

  > ul {
    display: flex;
    gap: var(--element-gap);
    flex-direction: row;

    > li > local-time {
      color: var(--element-color-secondary);
    }
  }
}