@media (max-width: 768px) {
    .animated-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-rows: 200px;
    }
}

@media (max-width: 600px) {
    .animated-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }

    .grid-item--width2 {
        grid-column: span 1;
    }

    .grid-item--height2 {
        grid-row: span 1;
    }

    .contact-left, .contact-right,
    .about-left, .about-right {
        padding: 1.5rem;
    }

    .nav-container {
        padding: 0 1rem;
    }

    .portfolio-grid {
        padding: 2rem 1rem;
    }

    .footer {
        padding: 3rem 1rem;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}