@import url("../css/custom-pagination.cce7d7873e00.css");

  .course-list {
    padding: 20px;
}

  .course-card-link {
  --card-grid-layout-container-columns: 9;
  --card-columns-span: 9;
  display: grid;
  grid-template-columns: repeat(var(--card-grid-layout-container-columns), 1fr);
  gap: 1.6rem;
  row-gap: 0.8rem;
  padding: 1rem 0;
  border-bottom: 1px solid #d1d2e0;
}

.course-card-link:last-child{
  border: none;
  
}

@media (max-width: 980px) {
  .course-card-link {
    --card-grid-layout-container-columns: 12;
    --card-columns-span: 12;
  }
}

@media (max-width: 700px) {
  .course-card-link {
    --card-grid-layout-container-columns: 4;
    --card-columns-span: 4;
  }
}


  .course-card-grid{
    grid-template-columns: repeat(9, 1fr);
    --image-column-start: 1;
    --image-column-end: 3;
    --main-content-column-start: 3;
    --main-content-column-end: -1;
    display: grid;
    position: relative;
    gap: 1.4rem;
}

@media (max-width: 980px) {
  .course-card-grid{
    grid-template-columns: repeat(12, 1fr);
    --image-column-end: 4;
    --main-content-column-start: 4;
  }
}

@media (max-width: 700px) {
  .course-card-grid{
    grid-template-columns: repeat(4, 1fr);
    --image-column-end: 3;
    --main-content-column-start: 3;
  }
}

@media (max-width: 600px) {
  .course-card-grid{
    --image-column-end: 2;
    --main-content-column-start: 2;
  }
}


  .course-image-container {
    align-self: start;
    background-color: #16161d;
    border: 1px solid #d1d2e0;
    overflow: hidden;
    position: relative;
  }

  .course-card-grid .course-image-container{
    grid-column-start: var(--image-column-start);
    grid-column-end: var(--image-column-end);

  }

  @media (max-width: 600px) {
  .course-image-container{
    aspect-ratio: 1.2;
  }

  .course-image-container img{
    height: 100%;
    object-fit: cover;
  }
}


  .course-image-container img{
    width: 100%;
    display: block;
  }

.course-card{
  grid-column: span var(--card-columns-span);
}

.course-card-inner{
  position: relative;
  height: 100%;
  width: 100%;
}

.course-details{
  padding-right: 10rem;
  margin-top: -4px;
}

.course-details>:not(:last-child){
  margin-bottom: 0.2rem;
}

.course-card-grid .course-details{
    grid-column-start: var(--main-content-column-start);
    grid-column-end: var(--main-content-column-end);
}

@media (max-width: 700px) {
  .course-details{
    padding-right: 0;
  }
}

.course-card-grid .course-details{
  grid-column-start: var(--main-content-column-start);
    grid-column-end: var(--main-content-column-end);
}

.course-details .course-title-wrapper{
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #2a2b3f;
}

.course-details .course-description{
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #2a2b3f;
}

@media (max-width: 600px) {
  .course-details .course-description{
    display: none !important;
  }
}

.course-details .course-instructors{
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    color: #595c73;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
