@media screen and (max-width: 768px) {
  html {
    font-size: 0.75rem;
  }
  .hero-section {
    height: 60vh;
    padding: 2rem 1rem 5rem 1rem;
  }
  .hero-section-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
  }
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
  #cart_items-container {
    width: 90%;
  }
  #login-form {
    width: 80%;
  }
}