.details {
  display: flex;
  gap: 1.6rem;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #6e7074;
  gap: 1.6rem;
  @include flex-direction(row);
  @include min(laptop) {
    grid-column: 1/2;
    grid-row: 1/3;
  }

  > img {
    border-radius: 1.2rem;
    border: 1.5px solid #ececec;
    background: lightgray 50% / cover no-repeat;
    min-width:9.65rem;
    height: 9.65rem;
    width: 9.65rem;
    object-fit: cover;
    @include min(laptop) {
      width: 15.6rem;
      height: 15.6rem;
    }
  }
}

.information {
  @include flex-direction(column);
  padding: 0 12px 0 0;
  flex: 1;
  padding: 0;
  justify-content: space-around;
  @include min(tablet) {
    min-width: 16rem;
    max-height: 10rem;
  }
}

.name {
  color: #1b1b1c;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.7rem;

  > svg {
    margin-left: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}

.title {
  color: #64646d;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
}

.socialIcons {
  display: flex;
  margin-bottom: 1rem;
  margin: 0 0 0;

  a {
    @include flex-align(center, center);
    width: 24px;
    height: 24px;
    background: #262629;
    margin-right: 0.8rem;
    border-radius: 100%;

    &:last-of-type {
      margin: 0;
    }

    img,
    svg {
      fill: #fff;
      width: 1.2rem;
    }
  }
}

.ribbon {
  border-radius: 10rem;
  padding: 0.4rem 0.8rem;
  background: #165af8;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  max-height: 1.9rem;
}

.ribbonAndExpert {
  @include flex-direction(row);
  @include flex-align(center, start);
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
  gap: 1.6rem;
  @include min(tablet){
    grid-column: 1/3;
    grid-row: 2/3;
  }
}

.authorStats {
  padding-top: 2.4rem;
  @include min(tablet){
    grid-column: 1/3;
    grid-row: 3/4;
    padding-top: 1rem;
  }
  p {
    display: inline-block;
    margin-right: 1.6rem;
    span {
      color: #1b1b1c;
      font-size: 1.4rem; 
      font-weight: 700;
      line-height: 2.2rem;
      margin-right: .4rem;
    }
    &:nth-child(2){
      &::first-letter{
        color: #1b1b1c;
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2.2rem;
      }
    }
  }
}

.templateTwo {
  @include flex-direction(column);
  @include min(tablet){
    @include flex-direction(row);
    @include flex-align(center, start);
  }
  > img {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    min-width: 8rem;
    @include min(tablet){
      width: 11.2rem;
      height: 11.2rem;
    }
    @include min(tablet){
      width: 12.8rem;
      height: 12.8rem;
    }
  }
  .socialIcons{
    @include min(tablet){
      position: absolute;
      right: 2.4rem;
      top: 2.4rem;
    }
  }
  > div {
    > p {
      > span {
        font-size: 2rem;
      }
    }
  }
}

.templateThree{
  display: flex;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #6e7074;
  gap: 1.6rem;
  @include flex-direction(row);
  @include min(tablet) {
    @include flex-direction(row);
  }
  
  @include min(laptop){
    grid-column: 1/2;
    grid-row: 1/4;
    @include flex-direction(column);
  }
  
  > img {
    border-radius: 100%;
    border: 1.5px solid #ececec;
    background: lightgray 50% / cover no-repeat;
    height: 9.6rem;
    width: 9.6rem;
    @include min(tablet){
        width: 10.8rem;
        height: 10.8rem;
    }
    @include min(laptop) {
      width: 12.4rem;
      height: 12.4rem;
    }
  }
}