/* --- General Responsive Styles --- */

/* Tablet and Larger Mobile Styles (screens up to 992px wide) */
@media (max-width: 992px) {
    .container {
        max-width: 960px;
    }
    /* Note: Specific component/layout responsive styles are in their respective files */
}

/* Smaller Tablet and Mobile Styles (screens up to 768px wide) */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }
    body {
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }

    /* Adjustments for Hero section on smaller screens */
    .hero-section { padding: 4rem 0; min-height: 300px; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 1rem; }

    /* Note: Header/Nav responsive styles are in layout/header.css */
    /* Note: Footer responsive styles are in layout/footer.css */
    /* Note: About section responsive styles are in pages/about.css */
}

/* Small Mobile Styles (screens up to 576px wide) */
@media (max-width: 576px) {
    /* General button adjustments */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    /* Further hero heading adjustment */
    .hero-content h1 { font-size: 1.8rem; }

    /* Note: Gallery teaser responsive styles are in components/gallery-teaser.css */
    /* Note: Game card responsive styles are in components/game-card.css */
}