html {
    --microsoft-for-developers-blog3-desktop: url("./microsoft-for-developers-blog3.jpg");
    --microsoft-for-developers-blog3-desktop: image-set(
        url("./microsoft-for-developers-blog3.avif"), 
        url("./microsoft-for-developers-blog3.jpg")
    );

    --microsoft-for-developers-blog3-mobile: url("./microsoft-for-developers-blog3-mobile.jpg");
    --microsoft-for-developers-blog3-mobile: image-set(
        url("./microsoft-for-developers-blog3-mobile.avif"), 
        url("./microsoft-for-developers-blog3-mobile.jpg")
    );
}

.microsoft-for-developers-blog3 .banner-card.lazyloaded {
    background-image: var(--microsoft-for-developers-blog3-desktop);
}

.microsoft-for-developers-blog3 .hero {
    min-height: inherit;
}

.microsoft-for-developers-blog3 .hero-title {
    max-width: 28rem;
}

.microsoft-for-developers-blog3 .hero .pane-header {
    max-width: 27rem;
}

@media (max-width: 576px) {
    .microsoft-for-developers-blog3 .banner-card.lazyloaded {
        background-image: var(--microsoft-for-developers-blog3-mobile);
        background-position-y: bottom;
        min-height: 29rem;
    }
}