@layer cavalree {
  :where(.c-switcher) {
    --c-switcher--gap: 0px;
    --c-switcher--gap--column: var(--c-switcher--gap);
    --c-switcher--gap--row: var(--c-switcher--gap);
    --c-switcher--place: normal;
    --c-switcher--place--block: var(--c-switcher--place);
    --c-switcher--threshold: 40rem; /* TODO: research */
  }

  .c-switcher {
    align-items: var(--c-switcher--place--block);
    column-gap: var(--c-switcher--gap--column);
    display: flex; /* TODO: and_chr >= 115, chrome >= 115, edge >= 115 */
    display: block flex;
    flex-wrap: wrap;
    row-gap: var(--c-switcher--gap--row);
  }

  .c-switcher_item {
    flex-basis: calc((var(--c-switcher--threshold) - 100%) * 1000);
    flex-grow: 1;
  }
}