@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .grid-2, .grid-3 {
        grid-template-columns: 1fr;
    }
    
    .hidden-mobile {
        display: none;
    }
    
    .hidden-desktop {
        display: block;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --text-primary: #e8eaed;
        --text-secondary: #9aa0a6;
        --shadow: 0 2px 12px rgba(0,0,0,0.3);
    }
}