@layer components {
  /* In a narrow column a period's name keeps its line and what it says goes under it. */
  @container layout (inline-size < 640px) {
    .periods__row {
      flex-wrap: wrap;
      row-gap: 0.25em;
      padding-block-end: var(--block-space-half);

      > .row__body {
        flex: 1 1 100%;
        padding-block-end: 0;
      }

      > .row__end {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 0.25em;
        white-space: normal;
      }
    }
  }
}