.server-table { min-width: 760px; }
.server-table thead th { font-size: 15px; color: var(--muted); padding-top: 12px; }
.server-table thead th:nth-child(1) { width: 23%; }
.server-table thead th:nth-child(2) { width: 30%; }
.server-table thead th:nth-child(3) { width: 12%; }
.server-table thead th:nth-child(4) { width: 21%; }
.server-table thead th:nth-child(5) { width: 14%; }
.server-table tbody th b { display: block; }
.server-table tbody th span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.server-price b { font-size: 18px; }
.server-group th { padding: 22px 18px 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); border-bottom: 2px solid var(--line); }
.server-table tr[id]:hover { background: var(--soft); }
.licence-table { min-width: 520px; max-width: 900px; margin: 0 auto; }

@media (max-width: 760px) {
  .server-table { min-width: 0; }
  .server-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .server-table tbody, .server-table tr, .server-group th { display: block; }
  .server-group th { padding: 26px 4px 8px; }
  .server-table tr[id] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
  .server-table tr[id] > * { display: block; padding: 0; border: 0; }
  .server-table tr[id] > th, .server-price { grid-column: 1 / -1; }
  .server-table tr[id] > td::before { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .server-table tr[id] > td:nth-of-type(1)::before { content: "Estimate a month"; }
  .server-table tr[id] > td:nth-of-type(2)::before { content: "Memory"; }
  .server-table tr[id] > td:nth-of-type(3)::before { content: "Storage"; }
  .server-table tr[id] > td:nth-of-type(4)::before { content: "Bandwidth"; }
  .server-table tr[id]:hover { background: none; }
}