/* TubeMe Responsive */

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
  .v-card { width: 200px; }
  .hero-slide { height: 280px; }
  .hero-title { font-size: 28px; }
}

@media (min-width: 900px) {
  body {
    padding-top: calc(var(--header-h) + var(--safe-top) + 4px);
  }
  .main-view { max-width: 1280px; margin: 0 auto; }
  .grid-2 { grid-template-columns: repeat(4, 1fr); }
  .grid-3 { grid-template-columns: repeat(5, 1fr); }
  .v-card { width: 220px; }
  .hero-slide { height: 360px; }
  .hero-title { font-size: 36px; }
  .app-header {
    padding-left: calc(50vw - 640px + 16px);
    padding-right: calc(50vw - 640px + 16px);
  }
  .bottom-nav { max-width: 520px; }
}

@media (min-width: 1280px) {
  .grid-2 { grid-template-columns: repeat(5, 1fr); }
  .grid-3 { grid-template-columns: repeat(6, 1fr); }
  .hero-slide { height: 420px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .player.fullscreen {
    aspect-ratio: unset;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}