div.carousel-item.active {
  width: 100%;
  aspect-ratio: 32/9;
}
div.carousel-item {
  aspect-ratio: 32/9;
}
div.carousel-item > div {
  background-size: cover;
  background-repeat: no-repeat;
}
.Listlesson-box {
  height: 100%;
  width: 100%;
}
.ListLesson_Title {
  color: rgb(68, 68, 68);
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}
.ListLesson_Title::before {
  font-size: 2.5rem;
  position: absolute;
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  color: #005fbf;
  left: 0;
  font-weight: 900;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.Container_ListLesson {
  min-height: 200px;
}
.placeholder {
  height: 200px;
}

.card {
  border-radius: 0;
  aspect-ratio: 4/3;
}
.card:hover {
  cursor: pointer;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  transition: -webkit-transform 0.15s ease-in-out;
  -o-transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
.card > * {
  border-radius: 0;
}
.card-img-top {
  aspect-ratio: 4/3;
  width: 100%;
}
.card-text {
  font-weight: bolder;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}
.why-container::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(white),
    color-stop(rgba(219, 37, 53, 0.65)),
    color-stop(rgba(219, 37, 53, 0.65)),
    color-stop(rgba(219, 37, 53, 0.65)),
    to(white)
  );
  background-image: -o-linear-gradient(
    top,
    white,
    rgba(219, 37, 53, 0.65),
    rgba(219, 37, 53, 0.65),
    rgba(219, 37, 53, 0.65),
    white
  );
  background-image: linear-gradient(
    to bottom,
    white,
    rgba(219, 37, 53, 0.65),
    rgba(219, 37, 53, 0.65),
    rgba(219, 37, 53, 0.65),
    white
  );
}

.box-item {
  border-radius: 20px;
  position: relative;
  margin-bottom: 35px;
  -webkit-box-shadow: 5px 5px 0px 0px rgba(33, 33, 33, 1),
    7px 7px 0px 0px rgba(33, 33, 33, 0.7), 9px 9px 0px 0px rgba(33, 33, 33, 0.4),
    11px 11px 0px 0px rgba(33, 33, 33, 0.1);
  box-shadow: 5px 5px 0px 0px rgba(33, 33, 33, 1),
    7px 7px 0px 0px rgba(33, 33, 33, 0.7), 9px 9px 0px 0px rgba(33, 33, 33, 0.4),
    11px 11px 0px 0px rgba(33, 33, 33, 0.1);
}
.box-item ul {
  list-style: square;
}
.box-item li {
  font-size: 1rem;
  margin-bottom: 2px;
}
.box-icon {
  position: absolute;
  font-size: 1.5rem;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #48adef;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.box-icon i {
  margin: auto auto;
  color: white;
}
.box-title {
  padding-left: 20px;
  padding-top: 20px;
  position: relative;
  padding-bottom: 10px;
  font-size: 1.3rem;
}
.box-title::before {
  position: absolute;
  content: "";
  height: 60%;
  width: 7px;
  background-color: red;
  top: 0;
  left: 0;
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.ListLessons {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 992px) {
  .ListLessons {
    grid-template-columns: repeat(4, 1fr);
  }
}