:root {
  --table-color: currentColor;
  --table-caption-color: currentColor;
  --table-border-color: var(--color-cyan-light);
}

.table {
  border-collapse: collapse;
  color: var(--table-color);
  font-size: 1.6rem;
  inline-size: 100%;
  line-height: var(--line-height-body);
}

.table__head-row,
.table__foot-row {
  background-color: var(--table-border-color);
  color: var(--table-header-color);
}

.table__head-cell,
.table__foot-cell {
  font-size: 1.8rem;
  font-weight: 600;
}

.table__head-cell,
.table__cell,
.table__foot-cell {
  border: 2px solid var(--table-border-color);
  hyphens: auto;
  line-height: var(--line-height-body);
  padding: 1rem 2rem;
  text-align: start;
  vertical-align: text-top;
}

.table__caption {
  caption-side: bottom;
  color: var(--table-caption-color);
  font-family: var(--font-headline);
  font-size: 1.4rem;
  line-height: var(--line-height-body);
  margin-block-start: 1rem;
  text-align: start;
}