.project-list {
  margin-top: 8px;
}

.project {
  display: block;
  padding: 32px 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  position: relative;
}

.project::before {
  content: "";
  display: block;
  width: calc(100% + 80px);
  height: 100%;
  position: absolute;
  top: 0;
  left: -40px;
  z-index: 1;
  background: var(--white);
  border-radius: 32px;
  -webkit-box-shadow: 0px 8px 16px -8px rgba(160, 189, 221, 0.15);
          box-shadow: 0px 8px 16px -8px rgba(160, 189, 221, 0.15);
  opacity: 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.project::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0px;
  background: var(--border);
}

.project:hover {
  z-index: 3;
}

.project:hover .project__name,
.project:hover .project__city,
.project:hover .project__text {
  color: var(--text);
}

.project:hover::before {
  opacity: 1;
}

.project:hover .project__image {
  opacity: 1;
  z-index: 1;
}

.project:hover .project__image .fit-image {
  width: calc(100% - 32px);
  height: auto;
  -webkit-transform: translateY(-50%) translateX(-60%) rotate(-5deg);
      -ms-transform: translateY(-50%) translateX(-60%) rotate(-5deg);
          transform: translateY(-50%) translateX(-60%) rotate(-5deg);
}
.project:hover:nth-child(odd) .project__image .fit-image {
  -webkit-transform: translateY(-50%) translateX(-40%) rotate(5deg);
      -ms-transform: translateY(-50%) translateX(-40%) rotate(5deg);
          transform: translateY(-50%) translateX(-40%) rotate(5deg);
}

.project:last-child::after {
  display: none;
}

.project__content {
  position: relative;
  z-index: 2;
}

.project__name,
.project__city,
.project__text {
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.project__title {
  width: 332px;
}

.project__image {
  width: 332px;
  position: relative;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  pointer-events: none;
}

.project__image .fit-image {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateY(-40%) translateX(-50%) rotate(0deg);
      -ms-transform: translateY(-40%) translateX(-50%) rotate(0deg);
          transform: translateY(-40%) translateX(-50%) rotate(0deg);
  border-radius: 32px;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.project__image .fit-image::before {
  content: "";
  display: block;
  padding-top: 75%;
}

.project__arrow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (max-width: 1023px) {
  .project-list {
    margin-bottom: 32px;
  }

  .project::before {
    display: none;
  }

  .project__name {
    color: var(--text);
  }

  .project__image {
    display: none;
  }
}

@media (max-width: 680px) {
  .project-list {
    margin-bottom: 0;
  }

  .project {
    padding: 24px 0;
  }

  .project__title {
    width: calc(100% - 40px);
  }

  .project__text {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .project__arrow {
    width: 24px;
    height: 24px;
  }
}