/* Responsive Design */

@media (max-width: 1024px) {
    .container {
        padding: 0 1rem;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {

    /* Typography */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    /* Layout */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    /* Navigation */
    .nav-links {
        display: none;
        /* Implement mobile menu later */
    }

    .section-padding {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
}