.legal-hero--reservations {
    background-color: var(--color-text);
    background-image:
        linear-gradient(90deg, #111111d9 0%, #111111b8 48%, #1111118f 100%),
        url("../images/wizard/wizard-hero.jpg");
    background-image:
        linear-gradient(90deg, #111111d9 0%, #111111b8 48%, #1111118f 100%),
        image-set(
            url("../images/wizard/wizard-hero.webp") type("image/webp"),
            url("../images/wizard/wizard-hero.jpg") type("image/jpeg")
        );
    background-position: 50% 58%;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 640px) {
    .legal-hero--reservations {
        background-image:
            linear-gradient(90deg, #111111e8 0%, #111111c7 58%, #111111a6 100%),
            url("../images/wizard/wizard-hero.jpg");
        background-image:
            linear-gradient(90deg, #111111e8 0%, #111111c7 58%, #111111a6 100%),
            image-set(
                url("../images/wizard/wizard-hero.webp") type("image/webp"),
                url("../images/wizard/wizard-hero.jpg") type("image/jpeg")
            );
        background-position: 50% center;
    }
}