/* Preserve the complete course artwork in roadmap lists. */
.rm2026-list img,
.rm-course-card img {
    width: 10rem;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background: var(--navy-deep, #011c40);
}

.rm2026-card > div,
.rm-course-card > div {
    min-width: 0;
}

@media (max-width: 35rem) {
    .rm2026-list a.rm2026-card,
    .rm-course-card {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 0.75rem 1rem;
    }

    .rm2026-list img,
    .rm-course-card img {
        width: 9rem;
        max-width: 100%;
    }

    .rm2026-card > div,
    .rm-course-card > div {
        grid-column: 1 / -1;
    }
}

/* Animated by default; show the matching still when reduced motion is set. */
@media (prefers-reduced-motion: reduce) {
    img[src$="/cc-claudecode-automation.gif"] {
        content: url('/course/imgs/cc-series/cc-claudecode-automation.png');
    }
    img[src$="/cc-vibecoding-basic.gif"] {
        content: url('/course/imgs/cc-series/cc-vibecoding-basic.png');
    }
    img[src$="/cc-aiagent-advanced.gif"] {
        content: url('/course/imgs/cc-series/cc-aiagent-advanced.png');
    }
    img[src$="/cc-datawithai.gif"] {
        content: url('/course/imgs/cc-series/cc-datawithai.png');
    }
    img[src$="/cc-vibecoding-pro.gif"] {
        content: url('/course/imgs/cc-series/cc-vibecoding-pro.png');
    }
    img[src$="/cc-free-automation.gif"] {
        content: url('/course/imgs/cc-series/cc-free-automation.png');
    }
    img[src$="/cc-free-vibecoding.gif"] {
        content: url('/course/imgs/cc-series/cc-free-vibecoding.png');
    }
    .next-step-thumb {
        background-image: url('/course/imgs/cc-series/cc-vibecoding-basic.png');
    }
    .rm2026-list a.rm2026-card,
    .rm-course-card {
        transition: none;
        transform: none;
    }
}