html {
    --microsoft-ai-tour-202412-desktop: url("./microsoft-ai-tour-desktop.jpg");
    --microsoft-ai-tour-202412-desktop: image-set(
        url("./microsoft-ai-tour-desktop.avif"), 
        url("./microsoft-ai-tour-desktop.jpg")
    );

    --microsoft-ai-tour-202412-mobile: url("./microsoft-ai-tour-mobile.jpg");
    --microsoft-ai-tour-202412-mobile: image-set(
        url("./microsoft-ai-tour-mobile.avif"), 
        url("./microsoft-ai-tour-mobile.jpg")
    );
}

.microsoft-ai-tour-202412 .banner-card.lazyloaded {
    background-image: var(--microsoft-ai-tour-202412-desktop);
}

.microsoft-ai-tour-202412 .hero {
    min-height: inherit;
}

.microsoft-ai-tour-202412 .hero-title {
    max-width: 37rem;
}

.microsoft-ai-tour-202412 .hero .pane-header {
    max-width: 34rem;
}

@media (max-width: 576px) {
    .microsoft-ai-tour-202412 .banner-card.lazyloaded {
        background-image: var(--microsoft-ai-tour-202412-mobile);
        background-position-y: bottom;
        min-height: 35rem;
    }
}