.single-team-card {
  border: 1px solid $color-border;
  background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.03);
  border-radius: 4px;
  // overflow: hidden;
  transition: 0.3s ease-in-out;

  &:hover {
    // box-shadow: $ac-shadow-1;
    border: 1px solid $ac-primary;
    background-color: $white-100;
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid $color-border;
    box-shadow: none;

    strong {
      font-size: 16px;
      line-height: 1.2;
      color: #1c2d41;
    }
  }

  .card-body {
    padding: 15px 20px;

    .users-profile {
      ul.users {
        padding-right: 15px;

        li {
          display: inline-block;
          list-style: none;
          margin-right: -15px;
          transition: 0.3s ease-in-out;

          &:hover:not(:last-child) {
            margin-right: -8px;
          }

          &:hover {
            transform: scale(1.2);
          }

          a {
            margin: 0;
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid $white-100;
            background-color: $white-100;

            img {
              width: 100%;
            }
          }
        }
      }

      a {
        display: block;
        font-size: 11px;
        font-weight: 500;
        margin-bottom: 20px;
      }
    }

    .meta {
      font-size: 1rem;
      color: $color-text;
      margin-bottom: 20px;
    }

    .role-schedule {
      display: flex;
      align-items: center;
      justify-content: space-around;
      list-style: none;
      li {
        &:not(:first-child) {
          list-style: disc;
        }
        font-size: 1rem;
        color: $color-text;
      }
    }
  }
}

/****************************************
Responsive Classes
*****************************************/
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}