/* GRID FOR THE GHOSTS PAGE */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* desktop: 3 across */ gap: 20px; padding: 20px; } /* Make images behave */ .photo-grid img { width: 100%; height: auto; border-radius: 6px; display: block; } /* Tablet */ @media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, 1fr); /* 2 per row */ } } /* Phones */ @media (max-width: 600px) { .photo-grid { grid-template-columns: 1fr; /* 1 per row */ } }

Ghosts of Winter

/* MOBILE LAYOUT FIXES */ @media (max-width: 768px) { body { padding: 0; margin: 0; overflow-x: hidden; } header, nav { width: 100%; text-align: center; } img { max-width: 100%; height: auto; } .container { width: 100%; padding: 10px; } h1, h2, h3, p { padding: 0 10px; } /* If your nav has links in one line, make them stack */ nav a { display: block; margin: 8px 0; } } /* EXTRA SMALL PHONES */ @media (max-width: 480px) { h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; } p { font-size: 1rem; } } /* === MOBILE FIXES === */ @media (max-width: 768px) { body { overflow: auto; /* allow scrolling on phones */ background-size: cover; /* background correctly stretches */ background-attachment: scroll; /* no more fixed glitching */ } nav { position: fixed; } /* Stack members instead of absolute positioning */ .members { position: relative; top: 120px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 30px; padding-bottom: 40px; } .member { position: static; /* remove absolute positioning */ width: 70%; max-width: 260px; } .member img { transform: none !important; /* no angle rotation on small screens */ } .member span { font-size: 1.5em; } /* Optional: hide the scattered desktop version of the grid if you want */ .photo-grid { display: none; } } @media (max-width: 480px) { .member { width: 80%; } .member span { font-size: 1.3em; } } .player { max-width: 500px; margin-left: 40px; margin-right: auto; text-align: left; } .epk-video { max-width: 600px; /* Controls how wide it can get */ margin: 0 auto; /* Centers it */ } .epk-video video { width: 100%; /* Makes it responsive */ border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }