.wc-course-box-container {
  background-color: #ffffff;
}
.wc-course-box-container img, .wc-course-box-container .wc-fallback-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.wc-course-box-grid {
  min-height: 200px;
  display: grid;
  grid-template: "heading        language" "presence-info  presence-info" "description    description" 1fr "price          price" "booking-status booking-status"/1fr min-content;
}
.wc-course-box-grid .wc-heading {
  grid-area: heading;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
}
.wc-course-box-grid .wc-description {
  grid-area: description;
  overflow: hidden;
}
.wc-course-box-grid .wc-icon-flag {
  grid-area: language;
  margin-top: 0;
}
.wc-course-box-grid .wc-icon-flag:before {
  float: right;
}
.wc-course-box-grid .wc-price-container {
  grid-area: price;
}
.wc-course-box-grid .wc-booking-status {
  grid-area: booking-status;
}
.wc-course-box-grid .wc-presence-info {
  grid-area: presence-info;
  --bs-columns: 1;
  --bs-gap: 4px 8px;
}
.wc-course-box-grid .wc-presence-info .material-icons {
  font-size: 20px;
}
.wc-course-box-grid .wc-trainer-link > .material-icons {
  margin-left: 4px;
}

.wc-details-grid {
  height: min-content;
  display: grid;
  grid-template: "heading         language" "presence-select presence-select" "presence-info   presence-info" "description     description" "price           price" ". ." 8px "info            info" ". ." 8px "booking-status  booking-status" "buttons         buttons"/1fr min-content;
}
.wc-details-grid .wc-heading {
  grid-area: heading;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-details-grid .wc-description {
  grid-area: description;
}
.wc-details-grid .wc-icon-flag {
  grid-area: language;
}
.wc-details-grid .wc-icon-flag:before {
  float: right;
}
.wc-details-grid .wc-price-container {
  grid-area: price;
}
.wc-details-grid .wc-booking-status {
  grid-area: booking-status;
}
.wc-details-grid .wc-buttons {
  grid-area: buttons;
}
.wc-details-grid .wc-presence-info {
  grid-area: presence-info;
  --bs-columns: 1;
  --bs-gap: 8px 16px;
}
@media (min-width: 576px) {
  .wc-details-grid .wc-presence-info {
    --bs-columns: 2;
  }
}
.wc-details-grid .wc-presence-select {
  grid-area: presence-select;
}
.wc-details-grid .wc-info-list {
  grid-area: info;
}
@media (min-width: 576px) {
  .wc-details-grid {
    grid-template: "heading         heading         language" "heading         heading         price" "presence-select presence-select price" "presence-info   presence-info   price" "description     description     price" 1fr ". . ." 16px "info            info            info" ". . ." 16px "booking-status  buttons         buttons"/1fr auto auto;
  }
}

.wc-trainer-link > .material-icons {
  margin-left: 8px;
}