html[data-theme='dark'] {
    --ai-for-devs-banner-bg: url("./ai-for-devs-banner-dark.jpg");
    --ai-for-devs-banner-bg: image-set(
        url("./ai-for-devs-banner-dark.avif") 1x, 
        url("./ai-for-devs-banner-dark.webp") 1x, 
        url("./ai-for-devs-banner-dark.jpg") 1x
    );
}
html[data-theme='light'] {
    --ai-for-devs-banner-bg: url("./ai-for-devs-banner-light.jpg");
    --ai-for-devs-banner-bg: image-set(
        url("./ai-for-devs-banner-light.avif") 1x, 
        url("./ai-for-devs-banner-light.webp") 1x, 
        url("./ai-for-devs-banner-light.jpg") 1x
    );
}

.ai-for-devs-banner .banner-card.lazyloaded {
    background-position: center right;

    background-image: var(--ai-for-devs-banner-bg);
}

.ai-for-devs-banner .card-body {
    padding-top: 2rem;
}

.ai-for-devs-banner .details {
    margin: 2rem 0;
}

.ai-for-devs-banner .details p:first-child {
    font-weight: 200;
}

.ai-for-devs-banner .hero-title {
    margin-bottom: 0.5rem;
}

.ai-for-devs-banner .banner-card.lazyloaded {
    padding-left: 6rem;
}
.ai-for-devs-banner .card-body .hero-title,
.ai-for-devs-banner .card-body .pane-header {
    max-width: 500px;
}



@media (max-width: 1200px) {
    .ai-for-devs-banner .banner-card.lazyloaded {
        background-position: right -100px center;
        background-size: auto 100%;
    }
}

@media (max-width: 992px) {
    .ai-for-devs-banner .card-body .hero-title,
    .ai-for-devs-banner .card-body .pane-header {
        max-width: 450px;
    }
    .ai-for-devs-banner .banner-card.lazyloaded {
        background-position: right -260px center;
    }
}

@media (max-width: 767px) {
    .ai-for-devs-banner .card-body .hero-title,
    .ai-for-devs-banner .card-body .pane-header {
        max-width: 350px;
    }
    .ai-for-devs-banner .banner-card.lazyloaded {
        background-position: right -300px center;
    }
}

@media (max-width: 767px) {
    .ai-for-devs-banner .card-body .hero-title {
        max-width: 320px;
    }
    .ai-for-devs-banner .card-body .pane-header {
        max-width: 340px;
    }
    .ai-for-devs-banner .banner-card.lazyloaded {
        background-position: right -320px center;
    }
}

@media (max-width: 576px) {
    .ai-for-devs-banner .card-body {
        padding-top: 6rem;
    }

    .ai-for-devs-banner .card-body .hero-title {
        max-width: 250px;
    }

    .ai-for-devs-banner .banner-card.lazyloaded {
       padding-left: 2.3rem !important;
    }
}