@media (max-width:1360px) {
  .strip {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }
}

@media (max-width:980px) {
  .main {
    grid-template-columns: minmax(0, 1fr)
  }

  .side {
    position: static;
    max-height: none;
    overflow: visible
  }

  .tabs {
    position: static;
    border-radius: 16px 16px 0 0
  }

  .plist {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(156px, 40%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    overscroll-behavior-x: contain
  }

  .pwrap {
    scroll-snap-align: start
  }
}

@media (max-width:720px) {
  .strip {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

@media (max-width:600px) {
  .strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
  }

  .sw-color {
    height: 58px
  }

  .sw-meta {
    padding: 6px 7px 8px
  }

  .sw-name {
    font-size: 13px
  }

  .sw-where {
    font-size: 11.5px
  }

  .seg.dev {
    display: none
  }

  .brand h1 {
    font-size: 26px
  }

  .top-actions .btn .lbl {
    display: none
  }

  .top-actions .btn {
    padding: 0 11px
  }

  .tab {
    font-size: 12.5px
  }

  .plist {
    grid-auto-columns: minmax(150px, 62%)
  }

  .crow {
    grid-template-columns: 54px minmax(0, 1fr)
  }

  .c-val {
    grid-column: 2;
    justify-content: flex-start
  }

  .c-ratio {
    text-align: left;
    min-width: 0
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important
  }
}