@media (max-width: 768px) {
    .container {
        /* Top/Bottom-Padding ist auf Mobile ueberfluessig:
           - Oben sitzt der .mobile-header, der schon Bottom-Padding hat
           - Unten ist die fixe .main-nav, dafuer hat body padding-bottom
           Nur seitliches Padding ist hier sinnvoll, damit Content nicht
           an den Rand klebt. */
        padding: 0 var(--spacing-24);
    }

    /* Filter-Modal: volle Breite auf Mobile */
    .filter-modal-content {
        width: 100%;
        max-width: none;
        max-height: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }

    .movie-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .movie-item img {
        width: 80px;
    }

    .login-form {
        padding: var(--spacing-16);
    }

    .button {
        padding: var(--spacing-8) var(--spacing-16);
    }

}

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 var(--spacing-24);
    }

    .movie-item img {
        width: 90px;
    }
}