@media all and (max-width: 1100px) {
  /* the analytics board drops from a 4-track to a 2-track grid; the two wide
     panels keep spanning both tracks so they stay the full row width */
  .sl-ana {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media all and (max-width: 999px) {
  /* run pad / match card / commentary stack in reading order */
  .sl-trio {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media all and (max-width: 991px) {
  .sl-hero__inner {
    grid-template-columns: 1fr;
  }
  .sl-hero__inner,
  .sl-overlays__inner {
    text-align: center;
  }
  .sl-hero__lede {
    max-width: 100%;
  }
  .sl-actions,
  .sl-head-row,
  .sl-pills {
    justify-content: center;
  }
  .sl-hero__aside {
    order: -1;
  }
  .sl-head {
    max-width: 100%;
    text-align: center;
  }
  .sl-head,
  .sl-lede {
    max-width: 100% !important;
  }
}

@media all and (max-width: 900px) {
  .sl-ana {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-panel--span2 {
    grid-column: span 1;
  }

  .sl-head-row {
    align-items: flex-start;
  }
}

@media all and (max-width: 767px) {
  .sl-cta {
    border-radius: 16px;
  }

  .sl-panel,
  .sl-potm,
  .sl-pad,
  .sl-match,
  .sl-comm,
  .sl-ctrl,
  .sl-season,
  .sl-voice,
  .sl-feat,
  .sl-ben,
  .sl-step,
  .sl-conf,
  .sl-award,
  .sl-theme,
  .sl-faq__item {
    border-radius: 12px;
  }

  .sl-panel,
  .sl-potm,
  .sl-ctrl,
  .sl-season,
  .sl-voice,
  .sl-feat {
    padding: 20px;
  }

  .sl-herophone {
    animation: none;
  }

  .sl-voice {
    flex-basis: min(100%, 300px);
  }
  .sl-sec {
    padding-top: clamp(30px, 6vw, 30px);
    padding-bottom: clamp(30px, 6vw, 30px);
  }
}

@media all and (max-width: 640px) {
  .sl-quad,
  .sl-setup,
  .sl-mob,
  .sl-grid,
  .sl-grid--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-actions .sl-btn {
    flex: 1 1 100%;
  }

  .sl-btn {
    padding: 14px 20px;
  }

  .sl-potm__grid {
    gap: 12px;
  }

  .sl-room {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-voice {
    flex-basis: 82vw;
  }

  /* P and NRR are the first columns to go — position, team and points carry
     the table on a phone */
  .sl-ptable__head,
  .sl-ptable__row {
    grid-template-columns: 20px minmax(0, 1fr) 34px 52px;
  }

  .sl-ptable__head span:nth-child(3),
  .sl-ptable__row .sl-ptable__n {
    display: none;
  }

  .sl-theme__badge {
    margin-left: 0;
  }

  .sl-match__acts {
    flex-wrap: wrap;
  }

  .sl-match__acts span {
    flex: 1 1 100%;
  }
}

@media all and (max-width: 460px) {
  .sl-page {
    font-size: 15px;
  }

  .sl-pad__keys {
    gap: 8px;
  }

  .sl-key {
    min-height: 52px;
    font-size: 16px;
  }

  .sl-op {
    flex: 1 1 100%;
    min-width: 0;
  }

  .sl-conf__crests,
  .sl-caps,
  .sl-swatches,
  .sl-mobstats {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-voice {
    flex-basis: 88vw;
  }

  .sl-voice-hint {
    display: none;
  }

  .sl-store img {
    height: 44px;
  }

  .sl-rating {
    width: 100%;
  }

  .sl-faq__q {
    font-size: 15px;
    padding: 16px;
  }

  .sl-faq__a {
    padding: 0 16px 16px;
  }

  .sl-ptable__head,
  .sl-ptable__row {
    grid-template-columns: 18px minmax(0, 1fr) 34px;
  }

  .sl-ptable__head span:nth-child(5),
  .sl-ptable__row .sl-ptable__nrr {
    display: none;
  }
}