.dsm-rate-table {
  width: 100%;
}

@media (max-width: 680px) {
  .dsm-rate-table,
  .dsm-rate-table tbody,
  .dsm-rate-table tr,
  .dsm-rate-table th,
  .dsm-rate-table td {
    display: block;
    width: 100%;
  }

  .dsm-rate-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .dsm-rate-table tbody tr {
    margin: 0 0 1rem;
    overflow: hidden;
    border: 1px solid rgba(9, 47, 76, 0.14);
    border-radius: 0.75rem;
    background: #fff;
  }

  .dsm-rate-table tbody th {
    padding: 0.8rem 1rem;
    border: 0;
    background: #eaf5f3;
    color: #092f4c;
  }

  .dsm-rate-table tbody td {
    padding: 0.8rem 1rem;
    border: 0;
    border-top: 1px solid rgba(9, 47, 76, 0.1);
  }

  .dsm-rate-table tbody td::before {
    display: block;
    margin-bottom: 0.25rem;
    color: #0a625c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .dsm-reddit-rate-table tbody td:nth-of-type(1)::before {
    content: "Experience and context";
  }

  .dsm-reddit-rate-table tbody td:nth-of-type(2)::before {
    content: "Self-reported rate";
  }

  .dsm-band-rate-table tbody td:nth-of-type(1)::before {
    content: "Evidence to consider";
  }

  .dsm-band-rate-table tbody td:nth-of-type(2)::before {
    content: "Pay design to define";
  }

  .dsm-world-rate-table tbody td:nth-of-type(1)::before {
    content: "Official reference";
  }

  .dsm-world-rate-table tbody td:nth-of-type(2)::before {
    content: "How to use it";
  }
}