Combine duplicate media query blocks in hero.css

[Copilot]

Addresses code review feedback from PR #5 to merge duplicate @media (max-width: 1024px) blocks.

Changes:

• Combined two separate @media (max-width: 1024px) blocks in apps/website/src/styles/hero.css into a single block

Before:

@media (max-width: 1024px) {
  .hero {
    padding-top: calc(var(--nav-height) + var(--space-16));
  }
}
@media (max-width: 1024px) {
  .hero > .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  /* ... more styles */
}

After:

@media (max-width: 1024px) {
  .hero {
    padding-top: calc(var(--nav-height) + var(--space-16));
  }

  .hero > .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  /* ... more styles */
}

Reduces duplication and improves maintainability of responsive breakpoints.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

This PR consolidates duplicate responsive breakpoint definitions in the website hero stylesheet by merging two identical @media (max-width: 1024px) blocks into a single block, improving maintainability and reducing repetition.

Changes:

• Removed the duplicate @media (max-width: 1024px) declaration and combined its rules into the existing block.
• Preserved the existing responsive behavior while simplifying the structure of hero.css.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.