team.scss

.team {
  &__main {
    background: center/cover no-repeat url('/assets/images/team/team-bg.webp');
    background-color: $dusty-silver;
    height: 75vh;
  }

  &__help {
    background-color: $sky-ua;
    box-shadow: inset 0px 2px 20px 0px rgba($dark_black, .1), 0px 0px 12px 0px rgba($dark_black, .5);
  }

  &__people {
    background-image: linear-gradient(to right, $sky-ua, $white);
    box-shadow: 0px 4px 25px 0px rgba($purple-heart, .25);

    *::before,
    *::after {
      position: absolute;
      content: '';
      background: 100%/85% 65% no-repeat url('/assets/images/ror_development_services/diamond.webp');
      mix-blend-mode: luminosity;
    }

    .wrapper {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;

      &::after {
        width: 70px;
        height: 70px;
        right: 15px;
        bottom: 1.5em;
        filter: blur(2px);
        transform: rotate(45deg);
      }
    }

    .message {
      position: relative;

      &::before {
        width: 47px;
        height: 50px;
        left: -9em;
        top: -1em;
        filter: blur(1px);
        transform: rotate(-20deg);
      }
    }
    .description { max-width: 90%; }

    .block-cera-title {
      position: relative;

      &::before {
        width: 100px;
        height: 100px;
        left: -15%;
        top: 0.5em;
        filter: blur(2px);
        transform: rotate(-55deg);
      }

      &::after {
        width: 47px;
        height: 50px;
        top: -1em;
        right: -3%;
        transform: rotate(20deg);
        filter: blur(1px);
      }
    }
  }

  &__crew {
    background: center/cover no-repeat url('/assets/images/about/about-bg.webp');
    box-shadow: 0px 0px 20px 0px rgba($dark_black, .25);
  }

  &__important_things {
    background-image: linear-gradient(to right top, $palianytsia, transparent, transparent, $palianytsia);
    box-shadow: 0px 0px 20px 0px rgba($purple-heart, .25);

    .list-with-images.horizontal {
      .list-with-images__item {
        margin-top: 2.5vh;
        align-items: center;

        &-text {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .description {
          max-width: 15em;
          width: 100%;
        }

        &:nth-child(-n+2) {
          max-width: 37%;
          width: 37%;
        }

        &:first-child { margin-left: 13%; }
        &:nth-child(2) { margin-right: 13%; }
      }
    }
  }

  &__photo {
    height: 80vh;
    background: center/cover no-repeat url('/assets/images/team/team.webp');
    box-shadow: 0px 0px 20px 0px rgba($dark_black, .25);
  }

  &__expertise {
    .button { margin-top: 3.5em; }

    &.development__cards {
      background-image: linear-gradient(to bottom, $kviten, $white);
    }
  }
}

@media screen and (max-width: 768px) {
  .team {
    &__main {
      height: 600px;
      background-position: 55% top;
      background-size: 250% 115%;
    }

    &__people {
      .wrapper::after { display: none }
      .block-cera-title { &::before,&::after { display: none; } }

      .message {
        &::before {
          width: 35px;
          height: 33px;
          left: -10%;
        }

        &::after {
          width: 55px;
          height: 55px;
          top: 50%;
          right: -5%;
          filter: blur(1px);
          transform: rotate(30deg);
        }
      }
      .description { max-width: 100%; }
    }

    &__important_things {
      .list-with-images.horizontal {
        .list-with-images__item {
          &:first-child { margin-left: 0; }

          &:nth-child(2) { margin-right: 0; }

          &:nth-child(-n+2) {
            max-width: 100%;
            width: 100%;
          }

          &:last-child { margin-bottom: 0; }
        }
      }
    }
    &__photo { height: 190px; }
  }
}