:root {
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f8fafc;
    --accent: #38bdf8;
    --container-width: 1200px; /* Increased from 900px to feel bigger */
}

* { box-sizing: border-box; } /* Prevents padding from breaking width */

body { 
    font-family: 'Inter', system-ui, sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0; 
    padding: 0;
    font-size: 16px; /* Base text size */
}

.container { 
    width: 95%; /* Auto-resizes on small screens */
    max-width: var(--container-width); 
    margin: 0 auto; 
    padding: 20px; 
}

/* Auto-sizing Grid */
.grid { 
    display: grid; 
    /* This line is magic: it fits as many cards as it can, then wraps automatically */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 25px; 
    margin-top: 20px; 
}

/* Make images/videos fill their containers */
.card img, .card video, .gallery-item {
    width: 100%;
    height: auto; /* Maintains aspect ratio */
    display: block;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    h1 { font-size: 1.8rem; }
    .grid { grid-template-columns: 1fr; } /* Single column on phones */
    .container { padding: 10px; }
}