.learncoveSingleCourse {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
}

.learncoveCourseSummary {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-gap: 20px;
  margin: 20px;
  outline: none; /* This is bad practice for accessibility */
}

.learncoveCourseSummary img {
  max-width: 100%;
  height: auto;
}

/* On mouse-over, add a deeper shadow */
.learncoveSingleCourse:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

details[open] summary {
  display: none;
}

.learncoveCourseDetailsTitle {
  border-bottom: 1px solid black;
  grid-column: 1 / span 2;
}

.learncoveSingleCourse .learncoveCourseLogo {
  grid-row: 1 / span 2;
}

.learncoveSingleCourse .learncoveCourseContainer {
  grid-column: 2 / span 2;
}

.learncoveSingleCourse .learncoveCourseFooterOne {
  grid-column: 2;
}

.learncoveSingleCourse .learncoveCourseFooterTwo {
  grid-column: 3;
}

.learncoveCourseDetailsFooter .details-less {
    float: right;
    margin-right: 50px;
    margin-bottom: 20px;
}

.learncoveCourseLogo img {
  border-radius: 5px; /* rounded corners */
}

summary::-webkit-details-marker {
  display: none
}

.learncoveCourseDetails {
    margin: 20px;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-gap: 20px;
}

@media screen and (max-width: 992px) {
    .learncoveCourseDetails {
        margin: 20px;
        display: block;
    }
}

.learncoveCourseDetailsLeft {
    grid-column: 1;
}

.learncoveCourseDetailsRight {
    grid-column: 2;
}

.learncoveCourseDetailsFooter {
    grid-column: 1 / span 2;
}

.learncoveCourseTeacher {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.learncoveCourseTeacher img {
    border-radius: 50%;
    width: 60px;
    margin-right: 20px;
}

.learncoveCourseTeacher span {
    text-align: center;
    font-size: 1.2em;
}

.learncoveCourseFooterOne [data-value=''] {
  display: none;
}

.learncoveCourseDetailsInfo [data-value=''] {
  display: none;
}
