.course-art {
 --sculpture-accent: #a8a1f0;
 position: relative;
 isolation: isolate;
 width: 100%;
 aspect-ratio: 380 / 220;
 margin: 0;
 overflow: hidden;
 border-radius: 15px;
 background: radial-gradient(ellipse at 48% 43%, #252636 0, #1a1c27 42%, #12151f 78%);
 box-shadow: inset 0 1px 0 #e1e5ff08, inset 0 -1px 0 #080b12b3;
 pointer-events: none;
}
.course-art::before {
 position: absolute;
 z-index: 1;
 inset: 0;
 border-radius: inherit;
 content: "";
 background: linear-gradient(118deg, #dddfff08, transparent 31%, transparent 64%, #98a2ed06);
 box-shadow: inset 0 0 0 1px #b4bdd70a;
}
.course-art::after {
 position: absolute;
 inset: auto 12% 0;
 height: 1px;
 content: "";
 background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sculpture-accent) 29%, transparent), transparent);
 opacity: .5;
}
.course-art-svg {
 display: block;
 width: 100%;
 height: 100%;
 overflow: visible;
 transform: translate3d(0, 1px, 0) scale(1);
 transition: transform .65s cubic-bezier(.19,1,.22,1), filter .65s ease;
 filter: saturate(.8);
}
.course-art-topic {
 display: block;
 width: fit-content;
 max-width: 100%;
 margin: 15px 0 7px;
 color: var(--card-topic-color, #a3a4bb);
 font: inherit;
 font-size: 10px;
 font-weight: 500;
 line-height: 1.45;
 letter-spacing: .12em;
 text-transform: uppercase;
 overflow-wrap: anywhere;
}
.course-card:hover .course-art-svg,
.course-card:focus-visible .course-art-svg {
 transform: translate3d(0, -3px, 0) scale(1.04);
 filter: saturate(1) brightness(1.05);
}
.course-card:hover .course-art::after,
.course-card:focus-visible .course-art::after { opacity: 1; }
.course-art--prism,
.course-art--fluid { --sculpture-accent: #a6b7ee; }
@media (prefers-reduced-motion: reduce) {
 .course-art-svg { transition: none; }
 .course-card:hover .course-art-svg,
 .course-card:focus-visible .course-art-svg { transform: none; }
}
@media (forced-colors: active) {
 .course-art { forced-color-adjust: none; }
 .course-art-topic { color: CanvasText; }
}