/* Keep Proko's 800x450 covers at their original proportions, with details
   in a separate row that can grow for long titles and narrow screens. */
proko-course-widget.prokoCourseWidget:not(.__error) {
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  width:100%;
}
proko-course-widget.prokoCourseWidget .widget-container {
  padding-top:0;
}
proko-course-widget.prokoCourseWidget .course-cover {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  border-radius:0;
}
proko-course-widget.prokoCourseWidget .course-cover proko-image {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
proko-course-widget.prokoCourseWidget .course-cover img {
  /* Proko sets object-fit:fill inline, so this override must be important. */
  object-fit:contain !important;
  object-position:center;
}
proko-course-widget.prokoCourseWidget .course-cover-backdrop {
  opacity:0;
}
proko-course-widget.prokoCourseWidget .course-details {
  position:relative;
  padding:20px;
  gap:16px;
  background:#101923;
}
proko-course-widget.prokoCourseWidget .course-title {
  font-size:clamp(1.5rem,5cqi,2.25rem);
  line-height:1.2;
  overflow-wrap:anywhere;
}
proko-course-widget.prokoCourseWidget .course-badge,
proko-course-widget.prokoCourseWidget .course-metric-title,
proko-course-widget.prokoCourseWidget .btn__text {
  font-size:0.875rem;
  line-height:1.5;
}
proko-course-widget.prokoCourseWidget .course-metric-title {
  opacity:.8;
}
proko-course-widget.prokoCourseWidget .course-metrics {
  max-height:none;
  overflow:visible;
  gap:12px 24px;
}
proko-course-widget.prokoCourseWidget .course-metric-value {
  font-size:1rem;
  line-height:1.5;
}
proko-course-widget.prokoCourseWidget .course-details>.flex:last-child,
proko-course-widget.prokoCourseWidget .btn__content {
  flex-wrap:wrap;
}
proko-course-widget.prokoCourseWidget .btn {
  min-height:48px;
  height:auto;
}
proko-course-widget.prokoCourseWidget .course-details>.flex:last-child>.btn {
  flex:1 1 auto;
}