.teachers {
  position: relative;
  width: 100%;
  padding: 80px 32px;
}

.teachers .teachers__title {
  color: #010741;
  margin: 0px;
  font-weight: 600;
  font-size: 38px;
  line-height: 48px;
}

@media (max-width: 767px) {
  .teachers .teachers__title {
    font-size: 28px;
    line-height: 32px;
  }
}

.teachers .content>* {
  max-width: 984px;
}

.success.teachers .list,
.teachers .list {
  max-width: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
}

.teachers .scroll .teacher {
  padding: 16px;
  min-width: 312px;
  max-width: 312px;
  overflow: hidden;
}

/* .teachers .scroll .teacher:hover {
  border: 1px solid #5cf2fe !important;
} */

.teachers .scroll .teacher.prominent,
.teachers.white .scroll .teacher.prominent {
  background-color: #010741;
  border: 1px solid #010741;
}

.teachers .scroll img.profile {
  aspect-ratio: 280/257;
}

.teachers .scroll .teacher span {
  width: 100%;
  padding: 24px 0px 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2px;
}

.teachers .scroll .teacher p {
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 16px;
}

.teachers .scroll .teacher .featured {
  width: 24px;
  height: 28px;
}

.teachers .content .list .left,
.teachers .content .list .shadow,
.teachers .content .list .right {
  display: none;
}

@media (max-width: 767px) {
  .teachers {
    padding: 48px 16px;
  }

  .teachers .scroll:has(.teacher) {
    flex-direction: column !important;
    gap: 16px !important;
    /* padding: 0px; */
  }

  .teachers .scroll .teacher {
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0px;
    display: flex;
  }

  .teachers .scroll .teacher.prominent {
    border: 0px !important;
  }

  .teachers .scroll .teacher img.profile {
    width: 36.6%;
    height: auto;
    aspect-ratio: 119/120;
    max-height: 7.5rem;
  }

  .teachers .scroll .teacher span {
    padding: 16px 16px 8px;
    gap: 2px;
  }
}