/* Fit whole text rows inside the original course card and cover proportions. */
#app :is(.public-resources-page, .paid-resources-page) .course-card { container-type: inline-size; }
#app :is(.public-resources-page, .paid-resources-page) .course-card .card-body {
  padding: clamp(1px, 1cqw, 4px) clamp(3px, 3.79cqw, 10px) !important;
}
#app :is(.public-resources-page, .paid-resources-page) .course-card .card-content {
  justify-content: center !important;
  gap: 2px !important;
}
#app :is(.public-resources-page, .paid-resources-page) .course-card :is(.video-title, .video-meta, .paid-hint) {
  display: block !important;
  flex: 0 0 auto !important;
  height: 1.25em !important;
  min-height: 1.25em !important;
  max-height: 1.25em !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
#app :is(.public-resources-page, .paid-resources-page) .course-card .video-title { font-size: clamp(10px, 5cqw, 14px) !important; }
#app :is(.public-resources-page, .paid-resources-page) .course-card :is(.video-meta, .paid-hint) { font-size: clamp(8px, 4.25cqw, 12px) !important; }
#app :is(.public-resources-page, .paid-resources-page) .course-card .video-desc { display: none !important; }
/* Reserve the subscription row on free cards so neighboring titles line up. */
#app .paid-resources-page .course-card .card-content:not(:has(.paid-hint))::after {
  content: "";
  flex: 0 0 1.25em;
  font-size: clamp(8px, 4.25cqw, 12px);
}
@container (max-width: 130px) {
  #app :is(.public-resources-page, .paid-resources-page) .course-card .card-body { padding: 1px 3px !important; }
  #app :is(.public-resources-page, .paid-resources-page) .course-card .card-content { gap: 0 !important; }
  #app :is(.public-resources-page, .paid-resources-page) .course-card .video-title { font-size: 9px !important; }
  #app :is(.public-resources-page, .paid-resources-page) .course-card .video-meta { font-size: 8px !important; }
  #app :is(.public-resources-page, .paid-resources-page) .course-card .paid-hint { display: none !important; }
  #app .paid-resources-page .course-card .card-content::after { display: none !important; }
}