/* Project Guide: phone layout for the tables.
   Below 600px each table becomes a list of labelled rows, so nothing is cut off
   and the page never scrolls sideways. Blank template cells are hidden on phones.
   Desktop and tablet keep the normal table. */
@media (max-width: 600px) {
  .content-body .table-wrap {
    overflow: visible;
  }
  .content-body .table-wrap table,
  .content-body .table-wrap tbody,
  .content-body .table-wrap tr,
  .content-body .table-wrap td {
    display: block;
    width: 100%;
  }
  .content-body .table-wrap thead {
    display: none;
  }
  .content-body .table-wrap tr {
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--border);
  }
  .content-body .table-wrap tbody tr:last-child {
    border-bottom: 0;
  }
  .content-body .table-wrap td {
    border: 0;
    padding: .15rem 0;
    text-align: left;
    white-space: normal;
  }
  .content-body .table-wrap td:first-child {
    font-weight: 600;
    padding-bottom: .3rem;
  }
  .content-body .table-wrap td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
  }
  .content-body .table-wrap td:empty {
    display: none;
  }
}