@layer components {
.main-content > .sx-table { position: relative; }

.sx-rack > .sx-rack-unit + .sx-rack-unit > .sx-group { margin-top: var(--space-8); }

.sx-head { display: contents; }

@media (max-width: 560px) {

  .sx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px var(--space-3);
    grid-area: name;
    min-width: 0;
  }

  .sx-row {
    grid-template-areas:
      "dot name"
      "... role"
      "... meta";
    row-gap: 3px;
    padding: 10px var(--space-4);
  }

  .sx-name,
  .sx-state { min-width: 0; }
}
}

@layer components {

@media (max-width: 1023px) {

  .main-content > .sx-hero {
    padding-top: calc(var(--navbar-h) + var(--hero-lede));
    padding-bottom: var(--stack-lg);
  }

  .main-content > .sx-table {
    padding-top: 0;
    padding-bottom: var(--stack-lg);
  }

  .sx-rack > .sx-rack-unit + .sx-rack-unit > .sx-group { margin-top: calc(2 * var(--stack-lg)); }
  .sx-rack { padding-bottom: var(--stack-lg); }
}

@media (max-width: 1023px) {
  .sx-foot-line { font-size: var(--mt-body); }
}

}