/* ─── OL-MKT-000021 (Core 1.0.73.132 "Marketplace step 1 + settings") ─────────
   Course pictures that follow light and dark mode (partials/course-thumb). The site's own switch wins:
   [data-ol-theme] on the New Courses 8 pages (layouts front2 / front2-public), html.ol-mode-light|dark on the
   other pages. When the visitor follows their device (html.ol-mode-system, or no site choice at all) the
   device setting decides. Pure CSS, so a toggle swaps the picture at once, without a reload. */
.ol-thumb{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#e7e1d2}
.ol-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ol-thumb .ol-thumb-d{display:none}
html[data-ol-theme="dark"] .ol-thumb{background:#23252b}
html[data-ol-theme="dark"] .ol-thumb .ol-thumb-l,html.ol-mode-dark .ol-thumb .ol-thumb-l{display:none}
html[data-ol-theme="dark"] .ol-thumb .ol-thumb-d,html.ol-mode-dark .ol-thumb .ol-thumb-d{display:block}
html[data-ol-theme="light"] .ol-thumb .ol-thumb-l,html.ol-mode-light .ol-thumb .ol-thumb-l{display:block}
html[data-ol-theme="light"] .ol-thumb .ol-thumb-d,html.ol-mode-light .ol-thumb .ol-thumb-d{display:none}
@media (prefers-color-scheme:dark){
  html.ol-mode-system:not([data-ol-theme]) .ol-thumb .ol-thumb-l,html:not([data-ol-theme]):not(.ol-mode-light):not(.ol-mode-dark):not(.ol-mode-system) .ol-thumb .ol-thumb-l{display:none}
  html.ol-mode-system:not([data-ol-theme]) .ol-thumb .ol-thumb-d,html:not([data-ol-theme]):not(.ol-mode-light):not(.ol-mode-dark):not(.ol-mode-system) .ol-thumb .ol-thumb-d{display:block}
  html.ol-mode-system:not([data-ol-theme]) .ol-thumb{background:#23252b}
}
/* In a Marketplace card the picture fills the cover. */
.olm-cover .ol-thumb{position:absolute;inset:0;aspect-ratio:auto;background:transparent}
/* Course catalogue and My learning */
.ol-public-course-card .ol-thumb{border-radius:12px 12px 0 0;margin:0}
.olx-cover .ol-thumb{position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit}
.olx-cover:has(.ol-thumb){position:relative;overflow:hidden}
.olx-li .ol-thumb.ol-thumb-sm{width:96px;min-width:96px;border-radius:8px;align-self:center}
@media (max-width:520px){.olx-li .ol-thumb.ol-thumb-sm{width:72px;min-width:72px}}
.olx-cover .olx-tag{z-index:2}
.olx-cover .olx-play{position:relative;z-index:2}
.olx-li:has(>.ol-thumb-sm){grid-template-columns:96px minmax(0,1fr) auto}
@media (max-width:520px){.olx-li:has(>.ol-thumb-sm){grid-template-columns:72px minmax(0,1fr) auto}}
.ol-public-course-card>.ol-thumb{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.ol-public-course-card:has(>.ol-thumb) .ol-public-course-card-mark{display:none}