.course-hero {
  padding-top: 90px;
  background-size: 0;
}
.course-hero__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 560px;
  padding: 40px 0;
  border-radius: 20px;
  background: #000 center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.course-hero__subtitle,
.course-hero__title,
.course-hero__btn,
.course-hero__list {
  position: relative;
  z-index: 2;
}
.course-hero__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  width: fit-content;
  padding: 0 20px;
  height: 50px;
  margin-bottom: 30px;
  border: 1px solid var(--white);
  border-radius: 14px;
  letter-spacing: -0.03em;
}
.course-hero__subtitle-icon {
  display: block;
  width: auto;
  height: 22px;
  margin-left: 10px;
}
.course-hero__title {
  margin-bottom: auto;
  font-size: 38px;
  line-height: 0.95;
  text-align: center;
  letter-spacing: -0.03em;
}
.course-hero__list {
  margin-top: 23px;
}
.course-hero__list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px 70px;
}
.course-hero__list li {
  position: relative;
  padding-left: 30px;
  letter-spacing: -0.03em;
  font-size: 16px;
  line-height: 1.25;
}
.course-hero__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99074 20C7.34113 20 4.8001 18.9465 2.92611 17.0712C1.05255 15.1957 0 12.6524 0 10C0 7.34769 1.05255 4.80459 2.92611 2.92886C4.79982 1.05357 7.34085 5.32762e-05 9.99074 5.32762e-05C11.5477 -0.00508595 13.0833 0.361657 14.47 1.06976C14.6925 1.18282 14.8378 1.40598 14.8514 1.65532C14.8647 1.90464 14.7443 2.14229 14.5354 2.27856C14.3264 2.41498 14.0605 2.4293 13.8382 2.31624C12.6484 1.70249 11.3289 1.38356 9.99052 1.38607C7.71106 1.38607 5.52479 2.29224 3.91288 3.90517C2.30084 5.51822 1.39471 7.70607 1.39395 9.98764C1.39302 12.2692 2.29761 14.4575 3.90853 16.0717C5.51946 17.6858 7.70496 18.5936 9.98419 18.5953C12.2637 18.5969 14.4503 17.6924 16.0638 16.0804C17.6771 14.4686 18.5846 12.2816 18.5871 9.99996C18.592 9.92256 18.592 9.84485 18.5871 9.76746C18.564 9.51813 18.6754 9.27534 18.8793 9.13067C19.0835 8.98584 19.349 8.96108 19.5763 9.06557C19.8037 9.17006 19.958 9.38793 19.9812 9.6371V9.99995C19.9788 12.6514 18.9254 15.1934 17.0523 17.0683C15.1792 18.9433 12.6395 19.9976 9.99044 19.9999L9.99074 20Z' fill='white'/%3E%3Cpath d='M9.82435 13.1724C9.64169 13.1752 9.46634 13.1009 9.34109 12.9678L4.85226 8.55851C4.72188 8.4277 4.64844 8.25047 4.64844 8.06548C4.64844 7.88063 4.72188 7.70341 4.85226 7.5726C4.98575 7.4435 5.16405 7.3714 5.34949 7.3714C5.53511 7.3714 5.71325 7.4435 5.84673 7.5726L9.83371 11.5074L18.8022 2.67972H18.8021C18.9356 2.55062 19.1139 2.47852 19.2993 2.47852C19.4847 2.47852 19.6631 2.55062 19.7965 2.67972C19.9271 2.81053 20.0003 2.98791 20.0003 3.17275C20.0003 3.35759 19.9271 3.53498 19.7965 3.66578L10.3353 12.9679C10.2009 13.1043 10.0156 13.1786 9.82423 13.1725L9.82435 13.1724Z' fill='white'/%3E%3C/svg%3E%0A")
    center/contain no-repeat;
}

.course-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.course-hero__img--mobile {
  display: none;
}

@media only screen and (max-width: 1260px) {
  .course-hero {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    background: #000 center/cover no-repeat;
    border-radius: 0 0 20px 20px;
  }
  .course-hero__wrap {
    padding-top: 100px;
    background-size: 0;
    background-color: transparent;
  }

  .course-hero__img--mobile {
    display: block;
  }

  .course-hero__img--desctop {
    display: none;
  }
}

@media only screen and (max-width: 760px) {
  .course-hero__wrap {
    height: 610px;
    padding: 85px 0 20px;
  }
  .course-hero__subtitle {
    min-width: 230px;
    margin-bottom: 10px;
    font-size: 16px;

    flex-direction: column;
    height: fit-content;
    padding: 10px 20px;
    text-align: center;
  }
  .course-hero__subtitle-icon {
    margin-left: 0;
    margin-top: 5px;
  }
  .course-hero__btn {
    max-width: none;
  }
  .course-hero__list ul {
    gap: 10px;
    justify-content: flex-start;
    padding-left: 10px;
  }
  .course-hero__list li {
    font-size: 14px;
  }
  .course-hero__list li::before {
    top: 3px;
    width: 15px;
    height: 15px;
  }

  .course-hero__img--mobile {
    display: block;
  }

  .course-hero__img--desctop {
    display: none;
  }
}