.tutors-card:nth-child(n+4) {
  display: none;
}

.tutors-card {
  width: 100%;
  padding: 15px;
  border: 1px solid #dce7fc;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 14px;
}

.tutors-card__wrap {
  display: grid;
  row-gap: 20px;
  margin-bottom: 20px;
}

.tutors-card__top {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto 1fr;
  grid-template-areas: "img name""rate rate";
  column-gap: 5px;
  justify-items: end;
}

.tutors-card__img {
  width: 80px;
  height: 80px;
}

.tutors-card__img img{
  border-radius: 50%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tutors-card__name {
  grid-area: name;
  font-weight: 600;
  font-size: 20px;
  line-height: 18px;
  padding: 15px 0 4px;
}

.tutors-card__rate {
  grid-area: rate;
  height: 15px;
  grid-column-start: 2;
  display: flex;
  align-items: center;
  gap: 3px;
}

.tutors-card__rate i {
  font-size: 11px;
  color: #fd460e;
}

.tutors-card__description {
  margin-bottom: 10px;
}

.tutors-card__course {
  margin-top: 20px;
  margin-right: 30px;
}

.tutors-card__course p:nth-child(1) {
  margin-bottom: 5px;
  grid-area: title;
  color: #bdbdbd;
}

.tutors-card__course p:nth-child(2) {
  grid-area: curs_name;
}

.tutors-card.became-tutor,
.tutors-card.give-feedback {
  height: 110px;
  border: 1px solid #0b2235;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 17px;
}

.tutors-card.became-tutor p,
.tutors-card.give-feedback p {
  font-weight: 700;
  font-size: 14px;
}

.tutors-card.became-tutor .tutors-card__img,
.tutors-card.give-feedback .tutors-card__img {
  width: 25px;
  height: 25px;
}

.tutors-card__course-link {
  font-size: 14px;
  grid-area: link;
}

.tutors-card__course-link::after {
  width: 14px;
  height: 9px;
  background-image: url(../img/tutor-card-arrow.svg);
}

.form .tutors-card__rate {
  cursor: pointer;
}

@media(min-width:576px) {
  .tutors-card__wrap {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 18px;
  }

  .tutors-card.became-tutor,
  .tutors-card.give-feedback {
    height: auto;
    cursor: pointer;
  }

  .tutors-card__description {
    min-height: 100px;
  }

  .tutors-card__rate i {
    font-size: 14px;
  }

  .tutors-card {
    padding: 20px;
    font-size: 16px;
  }

  .tutors-card__course p:nth-child(1) {
    font-size: 14px;
  }

  .tutors-card__course p:last-of-type {
    margin-bottom: 20px;
  }
  .feedback .tutors-card__course p:last-of-type {
    margin-bottom: 10px;
  }

  .tutors-card__course p .tutors-card__course-link::after {
    margin-left: 15px;
  }
}
  
@media(min-width:992px) {
  .tutors-card__wrap {
    grid-template-columns: repeat(4, 1fr);
  }

  .tutors-card:nth-child(n+4){
      display: initial;
  }

  .tutors-card:nth-child(n+9){
    display: none;
  }
  
  .tutors-card__description {
    min-height: 170px;
  }

  .tutors-card__name {
    grid-area: name;
    font-size: 24px;
    display: flex;
    align-items: center;
    line-height: 28px;
    grid-row-start: 4;
    grid-column-start: 1;
    margin-top: 0;
  }

  .tutors-card__course p:nth-child(1) {
    font-size: 12px;
  }

  .tutors-card__course-link {
    margin-top: 20px;
  }

  .tutors-card__course-link:after {
    margin-left: 15px;
  }

  .tutors-card.became-tutor,
  .tutors-card.give-feedback {
    height: auto;
    border: 2px solid #0b2235;
    display: flex;
    gap: 32px;
  }

  .tutors-card.became-tutor p,
  .tutors-card.give-feedback p {
    font-size: 24px;
    font-weight: 400;
  }

  .tutors-card__course {
    margin-right: 0;
  }

  .tutors-card__name {
      grid-row-start: 1;
      grid-column-start: 2;
  }

  .tutors-card__course-link {
    margin-top: 0;
    margin-bottom: 0;
  }

  .tutors-card__tutor {
    margin-bottom: 20px;
  }

  .tutors-card__tutor p:first-child {
    font-size: 12px;
    margin-bottom: 5px;
    color: #bdbdbd;
  }
}


/* feedback */

.card__details {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.card__details-item {
  margin-bottom: 5px;
}

.card__detail-h5 {
  font-size: 14px;
  color: #bdbdbd;
  font-weight: 300;
}

.card__detail-h6 {
  font-size: 14px;
  font-weight: 500;
}

.card__info {
  margin-top: 10px;
}

@media screen and (min-width: 1200px) {
    .tutors-card__img {
      width: 120px;
      height: 120px;
    }
}