.card{display:flex;padding:20px 30px;width:var(--cols4);flex-direction:column;align-items:flex-start;gap:20px;border-radius:20px;background:var(--white, #FFF);box-shadow:0 10px 30px #0000000f}@media screen and (1000px <= width < 1400px){.card{width:var(--courses-cols1);padding:20px 10px}}@media screen and (768px <= width < 1000px){.card{width:var(--cols2);padding:20px}}@media screen and (480px <= width < 768px){.card{width:var(--cols1);padding:10px;gap:10px}}@media screen and (360px <= width < 480px){.card{width:var(--cols2);padding:10px 20px;gap:10px}}.card>div:nth-child(1){display:flex;flex-direction:column;align-items:flex-start;gap:10px;align-self:stretch}@media screen and (width < 768px){.card>div:nth-child(1){gap:4px}}.thumbnail{display:flex;flex-direction:row;justify-content:center;width:100%;height:220px;overflow:hidden;border-radius:10px;align-items:center;.cover{display:inline-block;position:relative;transform:scale(135%);transform-origin:left top;margin-right:102px;margin-bottom:76.5px;width:290px;height:217.5px;overflow:clip;border-radius:20px;background:#f6f6f6}}.thumbnail:has(.cover){width:unset}@media screen and (1000px <= width < 1400px){.thumbnail{height:150px;.cover{transform:scale(.986);margin-right:-4px;margin-bottom:-3px}}}@media screen and (768px <= width < 1000px){.thumbnail{height:180px;.cover{transform:scale(1.086);margin-bottom:24px;margin-right:18.75px}}}@media screen and (480px <= width < 768px){.thumbnail{height:120px;.cover{transform:scale(.6552);margin-right:-97.5px;margin-bottom:-102px}}}@media screen and (360px <= width < 480px){.thumbnail{height:120px;.cover{transform:scale(.9589);margin-right:-12px;margin-bottom:-8.94px}}}.thumbnail>img{width:100%}.progress{display:flex;flex-direction:row;align-items:flex-start;gap:10px;align-self:stretch;color:var(--dark-main-color);font-variant-numeric:lining-nums proportional-nums;font-size:15px;font-weight:400;line-height:130%}.progress .value{color:var(--light-main-color);font-weight:500}.bar{display:flex;width:100%;padding-right:0;flex-direction:column;align-items:flex-start;position:relative;border-radius:10px;background:var(--light-grey);height:8px}.bar div{position:absolute;left:0;top:0;height:100%;align-self:stretch;border-radius:10px;background:var(--light-main-color)}.textPart{display:flex;flex-direction:column;align-items:flex-start;gap:4px;align-self:stretch}.textPart{color:var(--dark-main-color);line-height:130%}.textPart>div{display:flex;align-self:stretch}.textPart>div:nth-child(2){justify-content:space-between;align-items:center}.textPart .title{font-size:20px;font-weight:600;word-break:break-word}.textPart .updated{color:var(--Black, #50555B);font-variant-numeric:lining-nums proportional-nums;font-family:Roboto;font-size:17px;font-style:normal;font-weight:500;line-height:130%;& span{color:var(--light-main-color, #8BC34A)}}@media screen and (460px <= width < 768px){.textPart .title{color:var(--dark-main-color);font-variant-numeric:lining-nums proportional-nums;font-size:15px;font-weight:600;line-height:130%}}.textPart .category{overflow:hidden;text-overflow:ellipsis;font-size:17px;font-weight:400}@media screen and (360px <= width < 768px){.textPart .category{overflow:hidden;color:var(--dark-main-color);text-overflow:ellipsis;font-size:15px;font-weight:400;line-height:130%}}.textPart .author{color:var(--grey);font-size:15px;font-weight:400}@media screen and (360px <= width < 768px){.textPart .author{display:none}}.actions{display:flex;justify-content:space-between;align-items:flex-start;align-self:stretch}.actions .bookmarks{margin-right:10px}@media screen and (480px <= width < 768px){.actions .bookmarks{display:none}}.card.skeleton{.title,.category,.author,.actions{opacity:0;cursor:auto;pointer-events:none}}.carousel-slide:not(.active){display:none!important}.carousel-slide-switcher{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px;color:var(--light-main-color);& svg:not(.selected){cursor:pointer;opacity:.5}}.carousel-prev-slide,.carousel-next-slide{position:absolute;top:50%;transform:translateY(50%)}.carousel-next-slide{left:calc(100% + 20px)}.carousel-prev-slide{left:-66px}.carousel-empty{overflow:hidden;color:var(--dark-main-color);text-overflow:ellipsis;font-size:17px;font-style:normal;font-weight:400;line-height:130%}.category-filter{display:flex;gap:10px;flex-wrap:wrap;& button{height:40px;padding:10px 20px;@media screen and (width < 768px){padding:4px 20px}@media screen and (width < 480px){height:35px}}}