.card {
  border-radius: 0;
  border-width: var(--border);
  padding: var(--size-6);
  box-shadow: var(--shadow-sm);

  h1 {
    font-size: var(--text-2xl);
    font-family: var(--font-monospace-slab-serif);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    padding-bottom: var(--size-2);
  }
}

.card--main {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);

  h1 {
    border-bottom: var(--border-2) solid var(--color-border);
  }

  h2 {
    font-size: var(--text-xl);
    font-family: var(--font-monospace-slab-serif);
    font-weight: var(--font-bold);
  }

  main {
    flex: 1;
  }

  footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-2);
  }
}