.flex-table {
  width: 100%;
  margin-top: 2rem;
  border-radius: var(--corners);
  overflow: hidden;
  text-align: left;
  border: var(--bg, var(--psc-dark-teal)) 1px solid;
  border-spacing: 0px;
}

caption {
  text-align: left;
  margin: 1rem 0;
  caption-side: bottom;
}

caption:before {
  content: "Table: "
}

.flex-table tbody {
  border-radius: 3px
}

.flex-table thead {
  background-color: var(--bg-shade, var(--psc-dark-teal-25pc));
}

.flex-table tbody tr:hover {
  background-color: var(--bg-shade, var(--psc-dark-teal-10pc));
}

.flex-table th,
.flex-table td {
  vertical-align: top;
  padding: min(1rem, 1dvw);
}

.flex-table td:before {
  display: none;
}

.flex-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

@media (min-width: 62em) {
  .flex-table tr {
    width: 15%;
  }

  .flex-table .wide-column {
    width: 35%/*40%*/;
  }

  .flex-table th,
  .flex-table td {
    border-bottom: 1px solid var(--bg-shade, var(--psc-dark-teal-25pc));
  }
}

@media (max-width: 62em) {

  .flex-table tr {
    display: flex;
    flex-direction: column;
  }

  .flex-table th {
    display: none;
  }

  .flex-table td {
    display: block;
  }

  .flex-table td:before {
    content: attr(data-th) "";
    font-weight: bold;
    display: flex;
    font-size: 1.2rem;
    color: var(--bg, var(--psc-dark-teal));
  }


  .flex-table tr:not(:last-child) td:last-child {
    border-bottom: 1px dashed grey;
  }

}