@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.6fr 1fr;
  }

  .footer-inner {
    grid-template-columns: 1.6fr 1fr 1fr;
  }

  .game-grid--four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .header-inner {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-4);
  }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-12) var(--spacing-16);
    gap: var(--spacing-12);
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .nav-link {
    padding: 6px 0;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-secondary {
    grid-template-columns: 1fr;
  }


  .hero-card img {
    height: 200px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-header--right {
    flex-direction: column;
  }

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

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

  .scroll-row-wrapper {
    margin-inline: -16px;
    border-left: none;
    border-right: none;
  }

  .section-popular{
    overflow-x: hidden;
  }
  .site-footer{
    text-align: center;
  }
  .mosaic-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    text-align: center;
  }

  .game-detail-layout {
    grid-template-columns: 1fr;
  }

  .game-detail-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .game-detail-header-meta {
    align-items: flex-start;
  }

  .play-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .play-meta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .play-frame-aspect {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 520px) {
  .container {
    padding-inline: var(--spacing-12);
    /* height: 100vh; */
  }

  .search-panel .container{
    height: 100vh;
  }

  header .header-inner {
    height: 70px;
  }

  .game-grid--four,
  .game-grid--three {
    grid-template-columns: 1fr;
  }

  .scroll-card {
    min-width: 160px;
  }
}