.course-component{position:relative}.course-item{align-items:start;-moz-column-gap:2.4rem;column-gap:2.4rem;display:grid;grid-template-columns:auto;margin-bottom:2.1rem;position:relative;row-gap:1.6rem}.course-item.course-complete .course-image-thumbnail{opacity:.5}.course-item.course-complete .course-title{color:var(--color-text-default)}.course-image{border-radius:.3rem;display:flex;overflow:hidden;padding-bottom:56.25%;position:relative}.course-image-thumbnail{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.course-title{color:var(--color-text-boldest);font-family:var(--font-family-heading);font-size:2.2rem;font-weight:700;line-height:1.2;margin-bottom:.8rem}[dir=ltr] .course-title{text-align:left}[dir=rtl] .course-title{text-align:right}.course-desc{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-default);font-size:1.4rem;margin-bottom:1rem}.course-author{align-items:center;color:var(--color-text-bolder);display:inline-flex;font-size:1.4rem;font-weight:600}.course-author-title{background-color:var(--color-bg-chesstitle);border-radius:var(--radius-3);color:var(--color-neutrals-white)!important;font-size:1.2rem;font-weight:600;line-height:1;padding:.2rem .3rem}[dir=ltr] .course-author-title{margin-right:.5rem}[dir=rtl] .course-author-title{margin-left:.5rem}.course-main-info{display:block;width:100%}.course-extra-info{align-items:center;color:var(--color-text-subtle);display:flex;flex-wrap:wrap;font-size:1.4rem;font-weight:600}.course-info{align-items:center;display:inline-flex;margin-top:.9rem}[dir=ltr] .course-info:not(:last-child){margin-right:1.5rem}[dir=rtl] .course-info:not(:last-child){margin-left:1.5rem}.course-info-icon{font-size:2rem;align-self:flex-start;flex-shrink:0}[dir=ltr] .course-info-icon{margin-right:.4rem}[dir=rtl] .course-info-icon{margin-left:.4rem}.course-info-icon-skills{font-size:2rem;align-self:flex-start;flex-shrink:0}[dir=ltr] .course-info-icon-skills{margin-right:.2rem}[dir=rtl] .course-info-icon-skills{margin-left:.2rem}[dir=ltr] .course-info-icon-skills:last-child{margin-right:.7rem}[dir=rtl] .course-info-icon-skills:last-child{margin-left:.7rem}.course-progress-circle{border-radius:var(--radius-circular);box-shadow:0 0 0 .2rem var(--color-icon-default);display:block;height:1.4rem;overflow:hidden;position:relative;width:1.4rem}[dir=ltr] .course-progress-circle{float:left;margin:0 .6rem 0 .5rem}[dir=rtl] .course-progress-circle{float:right;margin:0 .5rem 0 .6rem}.course-status{align-items:center;background-color:var(--color-green-300);border-radius:var(--radius-circular);color:var(--color-neutrals-white);display:flex;height:5.5rem;justify-content:center;position:absolute;top:50%;transform-origin:center;width:5.5rem}[dir=ltr] .course-status{left:50%;transform:translate(-50%,-50%) scale(.7)}[dir=rtl] .course-status{right:50%;transform:translate(50%,-50%) scale(.7)}.course-status-done .course-status-icon{font-size:3.6rem}.course-bookmark-button-wrapper{position:absolute;top:-1.1rem;z-index:2}[dir=ltr] .course-bookmark-button-wrapper{right:1.5rem}[dir=rtl] .course-bookmark-button-wrapper{left:1.5rem}.course-menu-item{display:flex}.course-menu-item:not(:last-child){margin-bottom:.5rem}.course-menu-item .course-menu-icon{margin-top:-.2rem}[dir=ltr] .course-menu-item .course-menu-icon{margin-right:.7rem}[dir=rtl] .course-menu-item .course-menu-icon{margin-left:.7rem}.bookmark-button-add,.bookmark-button-remove{font-size:3.6rem}.bookmark-button-add{color:var(--color-icon-default)}.bookmark-button-add:hover{color:var(--color-icon-default-hovered)}.bookmark-button-remove{color:var(--color-slate-200)}.hide-button{display:none}@media (min-width: 34.375em){[dir=ltr] .course-status{transform:translate(-50%,-50%) scale(.8)}[dir=rtl] .course-status{transform:translate(50%,-50%) scale(.8)}}@media (min-width: 40em){.course-item{grid-template-columns:minmax(auto,32rem) 50%}.course-content{display:flex;flex-direction:column;height:100%;justify-content:space-between}}@media (min-width: 48em){[dir=ltr] .course-status{transform:translate(-50%,-50%) scale(1)}[dir=rtl] .course-status{transform:translate(50%,-50%) scale(1)}}