.mel-films { margin-top: clamp(40px, 6vw, 72px); }
.mel-films h2 { margin: 0; font: 700 clamp(20px, 2vw, 26px)/1.2 Poppins, system-ui, sans-serif; letter-spacing: -.02em; color: var(--mel-text-primary); }
.mel-films ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mel-films a { display: grid; gap: 10px; text-decoration: none; color: inherit; border-radius: 16px; padding: 10px; border: 1px solid var(--mel-border-default);
  background: var(--mel-surface-card); transition: border-color .15s ease, transform .15s ease; }
.mel-films a:hover { border-color: rgba(124,111,240,.55); transform: translateY(-1px); }
.mel-films a:focus-visible { outline: 2px solid #a99df7; outline-offset: 2px; }
.mel-films img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #0c1017; }
.mel-films span { padding: 0 4px 4px; font: 600 14px/1.4 Poppins, system-ui, sans-serif; color: var(--mel-text-primary); }
@media (prefers-reduced-motion: reduce) { .mel-films a { transition: none; } .mel-films a:hover { transform: none; } }