/* --- Smartphone Layout (~768px) --- */
.container { padding: 0 1.5rem; }

/* Mobile Nav */
nav { flex-direction: column; gap: 1rem; padding: 1.5rem; }
nav .nav-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
nav .nav-links a { font-size: 0.75rem; border: 1px solid #333; padding: 5px 10px; }

/* Vertical Layouts */
.grid-2, .grid-3 { display: flex; flex-direction: column; gap: 3rem; }

/* Typography Adjustments */
h1 { font-size: 2.5rem !important; }
h2 { font-size: 2rem !important; }

/* Image Consistency for SP */
.hover-scale img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}