.course-block:hover{
      transform:translateY(-2px) scale(1.006);
      filter:saturate(1.035) brightness(1.015);
      box-shadow:
        0 14px 30px color-mix(in srgb,var(--course-light-a) 27%,transparent),
        inset 0 0 0 1px rgba(255,255,255,.17),
        inset 0 1px 0 rgba(255,255,255,.22)!important;
    }
    .course-title{
      text-shadow:0 1px 1px rgba(0,0,0,.08);
    }
    .course-sub{
      opacity:.88;
    }
    .course-time{
      background:rgba(20,24,38,.15)!important;
      border:1px solid rgba(255,255,255,.14)!important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter:blur(4px);
    }

    html[data-theme="dark"] .course-block{
      background:linear-gradient(138deg,var(--course-dark-a),var(--course-dark-b))!important;
      border:0!important;
      box-shadow:
        0 10px 27px color-mix(in srgb,var(--course-dark-a) 25%,transparent),
        inset 0 0 0 1px rgba(255,255,255,.075),
        inset 0 1px 0 rgba(255,255,255,.10)!important;
    }
    html[data-theme="dark"] .course-block::before{
      background:
        linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.018) 38%,transparent 64%);
    }
    html[data-theme="dark"] .course-block::after{
      background:color-mix(in srgb,var(--course-dark-b) 58%,white 42%);
      opacity:.68;
    }
    html[data-theme="dark"] .course-block:hover{
      filter:saturate(1.06) brightness(1.045);
      box-shadow:
        0 15px 33px color-mix(in srgb,var(--course-dark-a) 32%,transparent),
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 1px 0 rgba(255,255,255,.12)!important;
    }
    html[data-theme="dark"] .course-time{
      background:rgba(7,10,17,.18)!important;
      border-color:rgba(255,255,255,.10)!important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
    }