.stages {
  --w-block: 50%;
  --gap: 16px;
}
.stages__title {
  margin-bottom: 28px;
}
.stages__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.stages__slider {
  width: calc(100% - var(--w-block) - var(--gap) / 2);
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.stages__slider .swiper {
  width: 100%;
  height: 100%;
}
.stages__slider .swiper-wrapper {
  height: 100%;
}
.stages__picture-box {
  width: calc(var(--w-block) - var(--gap) / 2);
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: block;
}
.stages__picture {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  display: block;
}

@media (min-width: 1024px) {
  .stages__slider .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    gap: 16px;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    width: 100% !important;
    height: 100%;
  }
  .stages__slider .swiper-slide {
    width: auto !important;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .stages__slider .stage-item {
    width: 100%;
    height: 100%;
  }
  .stages__slider .pagination-dots {
    display: none;
  }
}
@media (max-width: 1360px) {
  .stages {
    --w-block: 54%;
  }
}
@media (max-width: 1220px) {
  .stages {
    --w-block: 56%;
  }
}
@media (max-width: 1024px) {
  .stages {
    --w-block: 100%;
  }
  .stages__wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .stages__slider {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .stages__title {
    margin-bottom: 16px;
  }
}
@media (max-width: 460px) {
  .stages__slider .swiper {
    margin-right: calc(var(--padding) * -1);
    padding-right: var(--padding);
    width: calc(100% + var(--padding));
  }
  .stages__slider .swiper-slide {
    height: auto;
  }
  .stages__slider .stage-item {
    height: 100%;
  }
  .stages__picture-box {
    width: 100%;
  }
}
/* STAGE-ITEM START */
.stage-item {
  padding: 12px 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(121, 153, 161, 0.2);
  border-radius: 6px;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .stage-item:hover {
    background-color: var(--bg-grey);
  }
  .stage-item:hover .stage-item__num {
    opacity: 1;
  }
}
.stage-item__num {
  font-size: 54px;
  font-weight: 500;
  color: var(--primary-main);
  opacity: 0.2;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media (max-width: 1220px) {
  .stage-item {
    padding: 12px;
  }
  .stage-item__num {
    font-size: 36px;
  }
}
@media (max-width: 460px) {
  .stage-item {
    gap: 4px;
  }
  .stage-item__num {
    font-size: 28px;
    margin-bottom: 12px;
  }
}
/* STAGE-ITEM END */