html > body > #grid .link {
  /** Required arguments with purportedly ridiculous defaults */
  --element-gap: 400px;
  --element-color-shadow: red;
  --element-border-radius: 500px;
  --element-border-width: 100px;
  --element-preview-color: red;
  --element-preview-border-color: red;
  --element-preview-gap-vertical: 100px;
  --element-preview-font-title: normal 40px 'Comic Sans MS';

  display: grid;
  grid-template-columns:
    [icon-start]
    min-content
    [icon-end content-start]
    1fr
    [content-end];
  gap: var(--element-gap);
  word-break: break-word;

  border-radius: var(--element-border-radius);
  box-shadow: calc(var(--element-border-width) * -1) 0 0 var(--element-color-shadow);

  > * {
    grid-column: content;
  }

  &:before {
    content: '';
    font: var(--global-icon-font);
    color: var(--global-icon-color);
    grid-column: icon;
    grid-row: 1 / -1;
  }

  &:before {
    content: '💬';
  }

  &:has(> address):before {
    content: '🔗';
  }

  > figure {
    display: flex;
    flex-direction: column;
    gap: var(--element-preview-gap-vertical);
    color: var(--element-preview-color);

    &:not(:last-child) {
      padding-bottom: var(--element-preview-gap-vertical);
      border-bottom: 1px dashed var(--element-preview-border-color);
    }

    > h4 {
      font: var(--element-preview-font-title);
    }
  }
}