/* ============================================
   响应式样式
   ============================================ */

/* 768px 及以上 */
@media (min-width: 768px) {
  .container {
    padding: 0 60px;
  }

  .mobile-nav {
    display: none;
  }

  .top-nav {
    display: flex;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-badges {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 1024px 及以上 */
@media (min-width: 1024px) {
  .container {
    padding: 0 60px;
  }
}

/* 1200px 及以上 */
@media (min-width: 1200px) {
  .container {
    padding: 0 60px;
  }
}

/* 1360px 及以上 */
@media (min-width: 1360px) {
  .container {
    padding: 0 60px;
    max-width: 1520px;
  }
}

/* 2600px 及以上 */
@media (min-width: 2600px) {
  .container {
    max-width: 1520px;
    padding: 0 60px;
  }
}

/* 767px 以下 - 移动端 */
@media (max-width: 767px) {
  body {
    padding-bottom: 76px;
  }
}