.course-pay {
  background-color: var(--dark-blue-color);
  color: var(--main-white-color);
  overflow: clip;
}
.course-pay__container {
  display: grid;
}
@media (width >= 61.99875em) {
  .course-pay__container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (width < 75em) {
  .course-pay__container {
    grid-template-columns: repeat(2, 1fr);
  }
}
.course-pay__square {
  aspect-ratio: 480/420;
  border-right: 0.0625rem solid var(--stroke-color);
  position: relative;
}
@media (width >= 75em) {
  .course-pay__square {
    max-width: 30rem;
  }
}
.course-pay__square img {
  max-height: 100%;
}
.course-pay__square::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  height: 0.0625rem;
  background-color: var(--stroke-color);
  translate: -50% 0;
}
.course-pay__square:first-child::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0.0625rem;
  height: 1000%;
  background-color: var(--stroke-color);
  translate: 0 -50%;
}
.course-pay__img {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  --img-size: 15.625rem;
}
@media (width < 48.0625em) {
  .course-pay__img {
    --img-size: 10rem;
  }
}
.course-pay__img img {
  flex: 0 0 var(--img-size);
  width: var(--img-size);
  height: var(--img-size);
}
.course-pay__title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Evolventa;
  line-height: 0.8;
}
@media (min-width: 60em) {
  .course-pay__title {
    font-size: 2.625rem;
  }
}
@media (min-width: 30em) and (max-width: 60em) {
  .course-pay__title {
    font-size: clamp( 1.875rem , 1.125rem  +  2.5vw , 2.625rem );
  }
}
@media (max-width: 30em) {
  .course-pay__title {
    font-size: 1.875rem;
  }
}
.course-pay__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.875rem;
}
@media (min-width: 47.9375em) {
  .course-pay__info {
    padding: 2.5rem;
  }
}
@media (min-width: 30em) and (max-width: 47.9375em) {
  .course-pay__info {
    padding: clamp( 1.5rem , -0.1724738676rem  +  5.574912892vw , 2.5rem );
  }
}
@media (max-width: 30em) {
  .course-pay__info {
    padding: 1.5rem;
  }
}
@media (width >= 75em) {
  .course-pay__info {
    justify-content: flex-end;
  }
}
@media (width >= 87.5em) {
  .course-pay__info {
    padding-bottom: 5.125rem;
  }
}
@media (width < 75em) {
  .course-pay__info {
    order: 1;
  }
}
@media (width < 50em) {
  .course-pay__info {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}
.course-pay__info p {
  color: var(--white-on-blue-color);
  line-height: 1.3;
}
@media (min-width: 47.9375em) {
  .course-pay__info p {
    font-size: 1rem;
  }
}
@media (min-width: 30em) and (max-width: 47.9375em) {
  .course-pay__info p {
    font-size: clamp( 0.9375rem , 0.8329703833rem  +  0.3484320557vw , 1rem );
  }
}
@media (max-width: 30em) {
  .course-pay__info p {
    font-size: 0.9375rem;
  }
}
.course-pay__item {
  padding: 2.5rem 3.75rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 60em) {
  .course-pay__item {
    gap: 1.875rem;
  }
}
@media (min-width: 47.9375em) and (max-width: 60em) {
  .course-pay__item {
    gap: clamp( 1.25rem , -1.2338082902rem  +  5.1813471503vw , 1.875rem );
  }
}
@media (max-width: 47.9375em) {
  .course-pay__item {
    gap: 1.25rem;
  }
}
@media (width < 59.375em) {
  .course-pay__item {
    padding: 2.5rem;
  }
}
@media (width < 47.99875em) {
  .course-pay__item {
    padding: 1.5rem;
  }
}
@media (75em < width < 90em) {
  .course-pay__item {
    max-width: calc((100vw - 2.5rem) / 3);
  }
}
@media (width < 50em) {
  .course-pay__item {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}
.course-pay__item h1, .course-pay__item h2, .course-pay__item h3, .course-pay__item h4, .course-pay__item h5 {
  font-family: Evolventa;
  line-height: 1.2;
}
@media (min-width: 60em) {
  .course-pay__item h1, .course-pay__item h2, .course-pay__item h3, .course-pay__item h4, .course-pay__item h5 {
    font-size: 1.75rem;
  }
}
@media (min-width: 30em) and (max-width: 60em) {
  .course-pay__item h1, .course-pay__item h2, .course-pay__item h3, .course-pay__item h4, .course-pay__item h5 {
    font-size: clamp( 1.25rem , 0.75rem  +  1.6666666667vw , 1.75rem );
  }
}
@media (max-width: 30em) {
  .course-pay__item h1, .course-pay__item h2, .course-pay__item h3, .course-pay__item h4, .course-pay__item h5 {
    font-size: 1.25rem;
  }
}
.course-pay__item li {
  line-height: 1.5;
  position: relative;
  padding-left: 2.125rem;
  color: var(--white-on-blue-color);
}
@media (min-width: 47.9375em) {
  .course-pay__item li {
    font-size: 1rem;
  }
}
@media (min-width: 30em) and (max-width: 47.9375em) {
  .course-pay__item li {
    font-size: clamp( 0.9375rem , 0.8329703833rem  +  0.3484320557vw , 1rem );
  }
}
@media (max-width: 30em) {
  .course-pay__item li {
    font-size: 0.9375rem;
  }
}
@media (min-width: 47.9375em) {
  .course-pay__item li:not(:last-child) {
    margin-bottom: 0.625rem;
  }
}
@media (min-width: 30em) and (max-width: 47.9375em) {
  .course-pay__item li:not(:last-child) {
    margin-bottom: clamp( 0.5rem , 0.2909407666rem  +  0.6968641115vw , 0.625rem );
  }
}
@media (max-width: 30em) {
  .course-pay__item li:not(:last-child) {
    margin-bottom: 0.5rem;
  }
}
.course-pay__item li::before {
  content: "";
  position: absolute;
  top: 0.4375rem;
  left: 0.4375rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--natural-color);
}