@media (prefers-color-scheme: light) {
  tr { border: var(--border-dark); }

  thead, tbody {
    background-color: var(--color-light);
  }

  tbody {
    box-shadow: var(--shadow-lm);
  }

  td:hover, th:hover {
    background-color: var(--color-shade-lm);
  }

}

@media (prefers-color-scheme: dark) {
  table {
    color: var(--color-light);
  }

  tr {
    border: var(--border-light);
  }

  thead, tbody {
    background-color: var(--color-shade-dm);
  }

  tbody {
    box-shadow: var(--shadow-dm);
  }

  td:hover, th:hover {
    background-color: var(--color-dark);
  }
}

.featureSection table {
  margin-left: auto;
  margin-right: auto;
}

table   {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  max-width: 960px;
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-xlarge);
  table-layout: fixed;
  text-align: left;
}

table caption {
  font-size: var(--font-size-smaller);
  margin-bottom: var(--spacing-base);
}

article table {
  max-width: 640px;
}

thead th {
  font-family: 'Sans Bold';
  text-transform: capitalize;
  letter-spacing: var(--kern-medium) !important;
}

td {
  padding: var(--spacing-base);
}

th, td {
  vertical-align: middle;
  font-size: calc(var(--font-size-small) * 1.125);
}

th {
  padding: var(--spacing-base);
  text-align: left;
 }

 @media only screen and (max-width: 640px) {
   th, td {
     font-size: calc(var(--font-size-small) * 1);
   }
 }

@media only screen and (max-width: 480px) {
  th, td {
    font-size: var(--font-size-xsmall);
  }
}