html {
    --ai-agents-hacktogether-202504-desktop: url("./ai-agents-hacktogether-desktop.jpg");
    --ai-agents-hacktogether-202504-desktop: image-set(
        url("./ai-agents-hacktogether-desktop.avif"), 
        url("./ai-agents-hacktogether-desktop.jpg")
    );
}

.ai-agents-hacktogether-202504 .banner-card.lazyloaded {
    background-image: var(--ai-agents-hacktogether-202504-desktop);
    background-position: right center;
}

.ai-agents-hacktogether-202504 .hero {
    min-height: inherit;
}

.ai-agents-hacktogether-202504 .hero-title {
    font-size: 2.2rem;
}

.ai-agents-hacktogether-202504 .hero .pane-header {
    max-width: 26rem;
}

@media (max-width: 1399px) {
    .ai-agents-hacktogether-202504 .banner-card.lazyloaded {
        background-position-x: 65%;
    }
}

@media (max-width: 1199px) {
    .ai-agents-hacktogether-202504 .banner-card.lazyloaded {
        background-position-x: 62%;
    }
    .ai-agents-hacktogether-202504 .hero-title {
        max-width: 26rem;
    }
}

@media (max-width: 991px) {
    .ai-agents-hacktogether-202504 .banner-card.lazyloaded {
        background-position-x: 52%;
    }
}

@media (max-width: 767px) {
    .ai-agents-hacktogether-202504 .banner-card.lazyloaded {
        background-position-x: left;
    }
}

@media (max-width: 576px) {
    .ai-agents-hacktogether-202504 .banner-card.lazyloaded {
        padding-right: 6rem;

        background-image: url("./ai-agents-hacktogether-mobile.jpg");
        background-image: image-set(
            url("./ai-agents-hacktogether-mobile.avif"), 
            url("./ai-agents-hacktogether-mobile.jpg")
        );
    }

    .ai-agents-hacktogether-202504 .banner-card a.btn {
        margin-bottom: 6rem;
    }
}