$table-cell-padding: 1rem / 2;

table {
  margin: {
    right: -$table-cell-padding;
    left:  -$table-cell-padding;
  };
  border: 0;
  width: 100%;
  max-width: 100%;
}

td,
th {
  border: 0;
  padding: .75rem $table-cell-padding;
  vertical-align: top;
}

th,
caption {
  text-align: left;
}

@include sl-breakpoint--medium-max {
  .sl-c-table-responsive {
    margin-bottom: 1.5rem;
    width: 100%;
    overflow: {
      x: auto;
      y: hidden;
    }

    table { margin-bottom: 0; }

    td { white-space: nowrap; }
  }
}