@media (max-width: 860px) {
  .fv3-layout {
    padding-left: 16px;
    padding-right: 16px;
    gap: 18px
  }

  .fv3-layout .fv3-aside {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    gap: 10px;
    font-size: 13px
  }

  .fv3-aside .fv3-side-group,
  .fv3-aside .fv3-side-group+.fv3-side-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 2px 16px 6px;
    margin: 0 -16px;
    border-top: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%)
  }

  .fv3-aside .fv3-side-group::-webkit-scrollbar {
    display: none
  }

  .fv3-aside .fv3-side-title {
    flex: none;
    padding: 0 2px 0 0
  }

  .fv3-aside .fv3-cat {
    flex: none;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border-color: var(--color-border-secondary);
    background: var(--color-background-primary);
    white-space: nowrap;
    scroll-snap-align: start
  }

  .fv3-aside .fv3-cat.is-active {
    border-color: var(--schema);
    background: color-mix(in srgb, var(--schema) 12%, var(--color-background-primary))
  }

  .fv3-aside .fv3-cat-name {
    flex: none
  }

  .fv3-aside .fv3-tags {
    display: contents
  }

  .fv3-aside .fv3-tag {
    flex: none;
    padding: 6px 10px;
    white-space: nowrap;
    scroll-snap-align: start
  }
}