@media (min-width: 1501px) {
  /* .um-tab/.um-action are icon-only by default now (base rule above), so
     the only thing left to tweak at wide widths is a slightly tighter gap
     between action icons. */
  .um-actions {
    gap: 5px;
  }
}

@media (max-width: 1120px) {
  .um-topbar-inner {
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1fr) minmax(190px, 0.8fr);
  }

  .um-topnav,
  .um-actions {
    overflow: visible;
  }

  .um-topnav {
    justify-content: center;
  }

  .um-layout {
    grid-template-columns: 240px minmax(320px, 1fr);
  }

  .um-channel-video-grid,
  .um-channel-photo-grid,
  .um-channel-friends-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .um-rightbar {
    display: none;
  }

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

  .um-market-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .um-video-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .um-video-right {
    display: none;
  }

  .um-video-layout-single {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .um-video-layout-single.is-related-collapsed {
    grid-template-columns: minmax(0, 1fr) 56px;
  }

  .um-groups-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .um-friends-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .um-memories-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .um-saved-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .um-account-page-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .um-birthdays-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .um-listing-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .um-friend-grid,
  .um-suggestion-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .um-suggestion-grid-people {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .um-suggestion-list {
    width: 300px;
    flex: 0 0 300px;
  }
}

@media (max-width: 780px) {
  .um-topbar {
    height: auto;
    overflow: hidden;
  }

  .um-topbar-inner {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    max-width: 100%;
  }

  .um-topbar-inner > * {
    min-width: 0;
  }

  .um-brand {
    width: auto;
  }

  .um-topnav {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    scrollbar-width: thin;
  }

  .um-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    scrollbar-width: thin;
  }

  .um-actions .um-action {
    flex: 0 0 auto;
    padding: 9px 10px;
  }

  .um-topnav .um-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 38px;
  }

  .um-actions .um-profile-button {
    display: none;
  }

  .um-search {
    display: none;
  }

  .um-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-channel-profile {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 10px;
  }

  .um-channel-header {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
  }

  .um-channel-avatar-wrap,
  .um-channel-avatar-wrap .um-channel-avatar {
    width: 84px;
    height: 84px;
  }

  .um-channel-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .um-channel-video-grid,
  .um-channel-photo-grid,
  .um-channel-friends-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .um-profile-feed-layout {
    grid-template-columns: 1fr;
  }

  .um-profile-sidebar {
    position: static;
    order: 2;
  }

  .um-profile-timeline {
    order: 1;
  }

  .um-dashboard-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-market-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-video-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-video-layout-single {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100vh - 56px);
    padding: 10px;
  }

  .um-video-layout-single.is-related-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 44px;
  }

  .um-video-related {
    max-height: 220px;
  }

  .is-related-collapsed .um-video-related {
    max-height: 44px;
  }

  .um-reels-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100vh - 56px);
    padding: 10px;
  }

  .um-reels-layout.is-related-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 44px;
  }

  .um-reel-stage {
    align-items: start;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .um-reel-stage::-webkit-scrollbar {
    display: none;
  }

  .um-reel-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .um-reel-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: 0;
  }

  .um-reel-actions button {
    width: auto;
    min-height: 54px;
  }

  .um-reel-phone {
    min-height: 520px;
    max-height: none;
  }

  .um-reel-details {
    left: 12px;
    right: 12px;
    top: 72px;
    bottom: 12px;
    width: auto;
  }

  /* Same two-class selectors as the base rules in media-core.css, or those
     would now out-rank these small-screen overrides on specificity. */
  .um-modal-backdrop.um-media-viewer-backdrop {
    padding: 12px;
  }

  .um-modal.um-media-viewer-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .um-media-viewer {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .um-media-viewer-stage {
    min-height: 44vh;
  }

  .um-media-viewer-stage img,
  .um-media-viewer-stage video {
    max-height: 48vh;
  }

  .um-media-viewer-panel {
    max-height: calc(52vh - 72px);
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .um-groups-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-friends-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-memories-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-saved-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-account-page-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-policy-grid {
    grid-template-columns: 1fr;
  }

  .um-birthdays-layout {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .um-dashboard-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .um-market-sidebar {
    position: static;
    max-height: none;
  }

  .um-video-sidebar,
  .um-video-right {
    position: static;
  }

  .um-video-player {
    min-height: 280px;
  }

  .um-groups-sidebar {
    position: static;
    max-height: none;
  }

  .um-friends-sidebar {
    position: static;
    max-height: none;
  }

  .um-memories-sidebar {
    position: static;
    max-height: none;
  }

  .um-saved-sidebar {
    position: static;
    max-height: none;
  }

  .um-birthdays-sidebar {
    position: static;
    max-height: none;
  }

  .um-market-head {
    display: grid;
  }

  .um-market-filters {
    justify-content: flex-start;
  }

  .um-dashboard-head {
    display: grid;
  }

  .um-dashboard-grid,
  .um-metric-grid,
  .um-listing-grid,
  .um-friend-grid,
  .um-suggestion-grid {
    grid-template-columns: 1fr;
  }

  .um-suggestion-grid-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .um-suggestions-split {
    flex-direction: column;
    min-height: 0;
  }

  .um-suggestion-list {
    width: 100%;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--um-line);
    max-height: none;
  }

  .um-suggestion-preview-pane {
    max-height: none;
  }

  .um-creator-wallet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .um-creator-wallet .um-tool {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .um-memory-card {
    grid-template-columns: 1fr;
  }

  .um-saved-card {
    grid-template-columns: 1fr;
  }

  .um-birthday-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .um-birthday-row > .um-tool {
    grid-column: 2;
    justify-self: start;
  }

  .um-memory-art {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .um-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
  }

  .um-navitem,
  .um-shortcut,
  .um-contact {
    min-width: 0;
    gap: 8px;
  }

  .um-navitem span,
  .um-shortcut span,
  .um-contact span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .um-menu-panel {
    grid-template-columns: 1fr;
  }

}