
.section-about {
    padding: 78px 0 94px;
    background: url(../img/about/bg.svg) no-repeat top left #fff;
    background-size: 310px;
}

.section-about h2 {
    margin-top: 0;
    margin-bottom: 40px;
    display: inline-block;
    font-weight: 900;
    background: -webkit-linear-gradient(#CB008C, #650046);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-title {
    font-weight: 500;
    margin-bottom: 0;
}
.about-text {
    margin-bottom: 68px;
    max-width: 794px;
    margin-left: auto;
    margin-right: auto;
}

.wrap-person {
    width: 1090px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  display: flex;
  gap: 42px;
  justify-content: center;
  align-items: flex-start;
  justify-content: center;
}

.person {
  position: relative;
  transition: flex 0.5s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* gap: 26px; */
  position: relative;
}
.person-image {
  transition: width 0.5s ease;
  overflow: hidden;
  position: relative;
  width: 524px;
  height: 524px;
    border-radius: 23px;
  overflow: hidden;
  z-index: 2;
}
.person-image__bg {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
.person-name {
  cursor: pointer;
  position: absolute;
  bottom: 22px;
  color: #fff;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.person:nth-child(1) .person-name {
    left: 22px;
}
.person:nth-child(2) .person-name {
    right: 22px;
    flex-direction: row-reverse;
}
.person:nth-child(2) .person-name span {
    transform: scaleX(-1);
}
.person-name span {
    border-radius: 50%;
    background-image: url(../img/about/play.svg);
    background-position: 55% 50%;
    background-repeat: no-repeat;
    width: 42px;
    height: 42px;
    border: 1px solid #fff;
    transition: .2s;
}
.person-name:hover {
    color: #fff;
    text-decoration: none;
}
.person-name:hover span {
    background-color: #fff;
}
.person-description {
  overflow: hidden;
  font-weight: 300;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* max-width: calc(100% - 524px - 26px); */
  width: 348px;
  opacity: 0;
  transition: 0.3s ease;
}
.person:nth-child(1) .person-description {
    left: 0;
}
.person:nth-child(2) .person-description {
    right: 0;
}
.person-description__title {
    font-weight: 500;
    color: #CB008C;
}

.person:nth-child(1) {
    flex-direction: row-reverse;
}

.person.active {
    flex: 1;
}
.person.active .person-image__bg {
    filter: grayscale(0%);
}
.person.active:nth-child(1) .person-description {
    left: calc(524px + 26px);
}
.person.active:nth-child(2) .person-description {
    right: calc(524px + 26px);
}
.person.active .person-description {
  opacity: 1;
}
.person.shrink {
    flex: 0;
}
.person.shrink .person-image {
    width: 266px;
}

@media (max-width: 1399px) {
.person-image {
  width: 424px;
  height: 424px;
}
.person.active:nth-child(2) .person-description {
    right: calc(424px + 26px);
}
.person.active:nth-child(1) .person-description {
    left: calc(424px + 26px);
}

}
@media (max-width: 1199px) {
  
  .wrap-person {
    gap: 26px;
  }
  .person-image {
        width: 324px;
    }
    .person.shrink .person-image {
    width: 200px;
}
    .person.active:nth-child(1) .person-description {
        left: calc(324px + 12px);
    }
.person.active:nth-child(2) .person-description {
        right: calc(324px + 12px);
    }
    .person-description {
      width: 232px;
      font-size: 16px;
    }
.section-about {
    background-size: 220px;
}
}

@media (max-width: 767px) {
  .person-name span {
    display: none;
  }
  .section-about h2 {
    font-size: 28px;
    width: 352px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
    .section-about h2 br {
      display: none;
    }
    .about-title {
      margin-bottom: 0 !important;
    }
    .about-text {
      margin-bottom: 48px;
    }

    .wrap-person {
      gap: 48px;
      flex-direction: column;
      align-items: center;
    }
        .person-image {
        width: 340px;
        height: 340px;
    }
    .person {
      flex-direction: column;
    }
    .person:nth-child(1) {
    flex-direction: column;
}
 .person:nth-child(1) {
    flex-direction: column;
}

    .person-description {
text-align: center;
      width: 324px;
      margin: 20px auto 0 auto;
      top: auto;
      transform: none;
      opacity: 1;
      flex: none;
      display: block;
      position: static;
      left: auto !important;
      right: auto !important;
    }
    .person-description__title {
      font-size: 1.2em;
      margin-bottom: 4px;
    }
    .person.shrink {
    flex: 1;
}
.person.active {
    flex: 1;
}
    .person.shrink .person-image {
        width: 340px;
    }
       
    .person-image__bg {
      filter: none;
    }
    .person:nth-child(2) .person-name {
    right: auto;
    left: 22px;
    flex-direction: row;
}
.person:nth-child(2) .person-name span {
    transform: scaleX(1);
}
.section-about {
    background-size: 160px;
}
}

