.index-table {
  container-type: inline-size;
}

.index-narrow {
  display: none;
}

@container (max-width: 40rem) {
  .index-wide {
    display: none;
  }

  .index-narrow {
    display: flex;
  }

  /* A link in the phone row list takes the dense tap height; in the wide
     table the same link stays text-sized, so desktop rows keep their
     density. Views put row-link on the links their columns render. */
  .row-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-dense);
  }
}

.table-scroll {
  overflow-x: auto;
}