.course-card {
  margin: 2.5rem 15px;
  border-radius: 10px;
  box-shadow: 9px 8px 5px 2px #d7cdcd;
}
.course-card__wrapper {
  display: grid;
  grid-template-columns: 4fr 5fr 3fr;
  grid-template-areas: "image description info";
  grid-gap: 2rem;
}
@media screen and (max-width: 768px) {
  .course-card__wrapper {
    grid-template-columns: 4fr 3fr;
    grid-template-areas: "image image" "description info";
  }
}
@media screen and (max-width: 500px) {
  .course-card__wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "description" "info";
    grid-gap: 0;
  }
}
.course-card__image-wrapper {
  grid-area: image;
  position: relative;
}
.course-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.course-card__description {
  grid-area: description;
  padding: 2rem 2rem 0 0;
  border-right: 1px dotted #b4b4b4;
}
@media screen and (max-width: 768px) {
  .course-card__description {
    padding: 2rem 0 2rem 2rem;
  }
}
@media screen and (max-width: 500px) {
  .course-card__description {
    padding: 2rem;
  }
}
.course-card__info {
  grid-area: info;
  padding: 2rem 2rem 2rem 0;
}
@media screen and (max-width: 500px) {
  .course-card__info {
    padding: 2rem;
  }
}
.course-card__price {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: white;
  background-color: #18aedf;
  font-size: 1.8rem;
  padding: 0.2rem 1rem;
  border-radius: 0.4rem;
}
.course-card__button {
  margin-left: 0 !important;
}
/*# sourceMappingURL=view.css.map */