body {
  min-width: 0;
  overflow-x: clip;
}

.header-inner,
.shell,
.grid,
.podcasts,
.content {
  min-width: 0;
}

@media (max-width: 700px) {
  .filters,
  .tabs {
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }

  .filters::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  .filter,
  .tab {
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .card,
  .podcast,
  .category,
  .round-play,
  .remove {
    touch-action: manipulation;
  }
}

@media (max-width: 380px) {
  .shell {
    width: calc(100% - 24px);
  }

  .header-inner {
    padding-inline: 12px !important;
  }

  .header-inner .brand {
    min-width: 0;
    font-size: 16px;
  }

  .header-inner .brand-r {
    width: 35px !important;
    height: 34px !important;
  }

  .platform-menu {
    width: 42px;
    height: 42px;
  }

  .hero h1,
  .intro h1 {
    font-size: 41px;
    letter-spacing: -2px;
  }

  .head h1 {
    font-size: 38px;
  }

  .hero p,
  .intro p,
  .head p {
    font-size: 16px;
  }

  .toolbar {
    gap: 12px;
  }

  .stats {
    gap: 8px;
  }

  .stat {
    min-width: 0;
    padding-inline: 12px;
  }

  .tabs,
  .filters {
    margin-right: -12px;
    padding-right: 12px;
  }

  .grid {
    gap: 9px;
  }

  .card small,
  .podcast small {
    margin-inline: 11px;
  }

  .card h2,
  .card h3,
  .podcast h3 {
    margin-inline: 11px;
  }

  .episode {
    grid-template-columns: 54px minmax(0,1fr) 44px;
    gap: 10px;
  }

  .episode img {
    width: 54px;
    height: 52px;
  }
}