/* Compact lesson cards with course icons in the top-right corner. */
@media (max-width: 1180px), (max-width: 1366px) and (pointer: coarse) {
  :root body .workspace[data-mobile-page="classes"] .lesson-card:has(.lesson-body) {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px;
    gap: 6px 12px; padding: 14px; align-items: start;
  }
  :root body .workspace[data-mobile-page="classes"] .lesson-card .lesson-cover {
    grid-column: 2; grid-row: 1 / 3; align-self: start;
    width: 44px; height: 44px; border: 0; border-radius: 12px; margin: 0;
  }
  :root body .workspace[data-mobile-page="classes"] .lesson-card .lesson-cover svg { width: 25px; height: 25px; }
  :root body .workspace[data-mobile-page="classes"] .lesson-card:hover .lesson-cover { transform: none; }
  :root body .workspace[data-mobile-page="classes"] .lesson-body { display: contents; min-width: 0; padding: 0; }
  :root body .workspace[data-mobile-page="classes"] .lesson-body > .tag { grid-column: 1; grid-row: 1; justify-self: start; font-size: 11px; }
  :root body .workspace[data-mobile-page="classes"] .lesson-body h3 { grid-column: 1; grid-row: 2; min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  :root body .workspace[data-mobile-page="classes"] .lesson-summary { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin-top: 0; line-height: 1.6; overflow-wrap: anywhere; }
  :root body .workspace[data-mobile-page="classes"] .lesson-foot { grid-column: 1 / -1; grid-row: 4; min-width: 0; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
  :root body .workspace[data-mobile-page="classes"] .lesson-foot .reward { font-size: 11px; }

  :root body .workspace .lesson-page .lesson-article {
    display: grid; grid-template-columns: minmax(0, 1fr) 52px;
    gap: 6px 12px; padding: 18px;
  }
  :root body .workspace .lesson-page .lesson-cover {
    grid-column: 2; grid-row: 1 / 3; align-self: start;
    width: 52px; height: 52px; border: 0; border-radius: 14px;
  }
  :root body .workspace .lesson-page .lesson-cover svg { width: 30px; height: 30px; }
  :root body .workspace .lesson-page .lesson-content { display: contents; }
  :root body .workspace .lesson-page .lesson-content > .tag { grid-column: 1; grid-row: 1; justify-self: start; font-size: 11px; }
  :root body .workspace .lesson-page .lesson-content > h1 {
    grid-column: 1; grid-row: 2; min-width: 0; margin: 0; font-size: 21px; line-height: 1.45; overflow-wrap: anywhere;
  }
  :root body .workspace .lesson-page .lesson-content > p { grid-column: 1 / -1; grid-row: 3; min-width: 0; margin: 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
  :root body .workspace .lesson-page .lesson-meta { grid-column: 1 / -1; grid-row: 4; margin-top: 2px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
  :root body .workspace .lesson-page .md { grid-column: 1 / -1; grid-row: 5; min-width: 0; margin-top: 12px; }
  :root body .workspace .lesson-page .md:empty { display: none; }
  :root body .workspace .lesson-page .complete-zone { grid-column: 1 / -1; grid-row: 6; margin-top: 12px; padding: 14px; min-width: 0; }
  :root body .workspace .lesson-page .complete-zone .btn { max-width: 100%; white-space: normal; }
}