/* Keep the comparison data in semantic tables, with readable row cards on narrower screens. */
.table-as-cards { width: 100%; min-width: 0; }
.table-as-cards table { width: 100%; min-width: 0; table-layout: fixed; }
.table-as-cards th, .table-as-cards td { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .table-as-cards table,
  .table-as-cards tbody { display: block; width: 100%; }
  .table-as-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .table-as-cards tbody { padding: 1rem; }
  .table-as-cards tbody tr { display: block; overflow: hidden; margin: 0 0 1rem; border: 1px solid rgba(35,31,32,.12); border-radius: 1rem; background: #fff; }
  .table-as-cards tbody tr:nth-child(even) { background: #fdf8ee; }
  .table-as-cards tbody tr:last-child { margin-bottom: 0; }
  .table-as-cards tbody th[scope="row"] { display: block; width: 100%; padding: 1rem; background: #231f20; color: #fff; font-weight: 700; text-align: left; }
  .table-as-cards tbody td { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: .75rem; width: 100%; padding: .7rem 1rem; border-top: 1px solid rgba(35,31,32,.08); }
  .table-as-cards tbody td::before { content: attr(data-label); font-weight: 600; color: #665e60; }
}

@media (max-width: 430px) {
  .table-as-cards tbody { padding: .75rem; }
  .table-as-cards tbody td { display: block; }
  .table-as-cards tbody td::before { display: block; margin-bottom: .2rem; }
}