.course-art,
.course-hero-art {
    position: relative;
    isolation: isolate;
    overflow: hidden
}

.course-art-image,
.course-banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0
}

.course-art>*:not(img) {
    position: relative;
    z-index: 1
}

.course-hero-art>*:not(img) {
    position: relative;
    z-index: 2
}

.course-art:has(.course-art-image) {
    background: linear-gradient(135deg, #d9f0ec, #dce8f3)
}

.course-hero-art:has(.course-banner-image)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #102a4370, #117c7966);
    z-index: 1
}