

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
.item-image{
  display:none;
}
/*делаем список урок*/
.lesson-list {
  background: none;
  padding:0;
  margin:0;
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}
/*делаем список урок табличкой в 3 шт на строчку*/
.lesson-list li{
  margin:0;
   flex:0 0 calc((100% - 20px) / 3);
   background: #F8F8F8;
  border-radius: 10px;
}
/*убираем заливку статуса урока(стоп урок/принят)*/
.lesson-list li .user-state-bg{
  background: none!important;
}
/*убираем заливку статуса урока(стоп урок/принят)*/
.lesson-list li .state-icon-block,
.lesson-list li .user-state-label-ex,
.lesson-list li .user-state-label{
  display: none!important;
}

.lesson-list li .info{
  margin-left:0;
  border: none;
  background: transparent;
      display: flex;
    flex-direction: column;
    height: 100%;
  justify-content: space-between
  
}
/*делаем кликабельную ссылку на всю карточку*/
.lesson-list li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px;
}

.lesson-list li .title {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 116%;
  color: #333333;
  padding-bottom: 16px;
  margin-right: 0px;
  min-height: 60px;
}
.lesson-list .description {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #98988D;
  opacity: 0.7;
  width: 100%;
}

.lesson-list li.divider {
  display:none
} 

 .lesson_image{
  content:'';
  background: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/47/h/7b18628fccba61e7670bb73408470117.png");
  width: 100%;
	height: 100px;
   background-repeat: no-repeat;
}
.lesson-list li .info::after{
 content:"";
 display:block;
  width: 100%;
	height: 20px;
	margin-top: 18px;
  background-repeat: no-repeat;
}
.lesson-list li.user-state-not_reached .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/222/h/ed0baf02bc5c67d6541571b543aa60f3.png");
   }
.lesson-list li.user-state-not_reached.first-unreached .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/222/h/ed0baf02bc5c67d6541571b543aa60f3.png");
   }
.lesson-list li.user-state-accomplished .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/259/h/0b704c0cd643a05e6ecd253abd015ee1.png");
   }
.lesson-list li.user-state-answered .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/289/h/2b644ce8023df23c35ec66f5ecbbf465.png");
   }

.lesson-list li.user-state-has_mission .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/499/h/a9c8fd4e1ce7b5afefc9c988ba32d94a.png");
   }

.lesson-list li.user-state-not_reached .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/120/h/5907b1ce73587c19f75772b9e727b1ce.png");
   }

.lesson-list li.user-state-need_accomplish .info::after {
  background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/242/h/3244076a4d73b9eebb7fce379a7550aa.png");
   }
.lesson-list li:not(.user-state-not_reached)  a:after {
    content: "";
    background: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/436/h/ab4ca99c2bb47efacf8943a1f7ad543f.png");
    display: block;
    width: 12px;
    height: 12px;
    right: 20px; 
    bottom: 20px;
    position: absolute;
   } 

.lesson-list li:not(.user-state-not_reached) a::before {
  content: ' ';
  background: #ffe7e7;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  clip-path: circle(0% at 100% 100%);
  transition: clip-path 0.4s linear;
}
.lesson-list li:not(.user-state-not_reached) a:hover::before {
  clip-path: circle(20% at 100% 100%);
}
.lesson-list li:not(.user-state-not_reached)  a:hover:after {
  background: url("https://fs.getcourse.ru/fileservice/file/download/a/523416/sc/436/h/ab4ca99c2bb47efacf8943a1f7ad543f.png");
}


/*Медиа запрос*/
@media (max-width: 1020px) {
.lesson-list li {
      flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 768px) {
    
.lesson-list li {
      flex: 0 0 calc((100% - 20px));
    }

.lesson-list li .vmiddle {
        margin: 0px;
        padding: 0px;
    }
}


