@layer modules {
  /* Two-column layout: main column (header + cards + notes) sits beside the
     cycle history table when the page is wide enough; otherwise the cycle
     history wraps below. */
  .animal-show {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
  }

  .animal-show__main,
  .animal-show__cycles {
    flex: 1 1 25rem;
    min-inline-size: 0;
  }
}