.#{$prefix}-instructors {
  .#{$prefix}-card {
    &-header {
      padding: 0;
      border-bottom: none;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
    &-body {
      .#{$prefix}-card-head {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        h3 {
          font-size: 1.25rem;
          font-weight: 500;
          word-break: break-word;
          text-transform: capitalize;
        }
        .#{$prefix}-instructor-info {
          display: flex;
          align-items: center;
          gap: 1.25rem;
          .#{$prefix}-instructor-courses,
          .#{$prefix}-instructor-students {
            display: flex;
            align-items: center;
            gap: 0.313rem;
            i {
              &::before {
                color: rgba(var(--wpt-lms-primary-700));
              }
            }
          }
        }
      }
      .button {
        width: max-content;
      }
    }
  }
  &-list {
    .#{$prefix}-instructor {
      &-item {
        border: .063rem solid rgba(var(--wpt-lms-box-border), 0.5);
        background-color: rgb(var(--wpt-lms-white));
        border-radius: .75rem;
        padding: 1.25rem;
        gap: 0.75rem;
        transition: all 0.15s ease-in-out;
        &:hover {
          box-shadow: 0 4px 12px rgba(var(--wpt-lms-primary-500), 0.1);
          border-color: rgba(var(--wpt-lms-primary-200));
        }
        .#{$prefix}-card {
          &-header {
            img {
              border-radius: 0.5rem;
            }
          }
          &-body {
            padding: 0;
            a {
              h3 {
                font-size: 1rem;
              }
            }
            i {
              color: rgba(var(--wpt-lms-primary-700));
              padding: .325rem;
              background-color: rgb(var(--wpt-lms-primary-100));
              border-radius: .25rem;
            }
          }
        }
      }
    }
  }
}