.examples {
  text-align: center;
  padding: var(--sp) 0;
}

.single-post .examples {
  position: relative;
  padding: 64px 0;
}

.single-post .examples::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(100% + 50px);
  bottom: 0;
  width: 100vw;
  background: #F5F5F5;
  z-index: 2;
}

.single-post .post__content .examples__container {
  position: relative;
  z-index: 1;
  padding: 0;
}

.examples__title + .examples__subtitle {
  margin-top: 40px;
}

.examples__title + .examples__slider,
.examples__subtitle + .examples__slider {
  margin-top: 70px;
}

.examples__slider {
  overflow: visible;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

._wide-slider .examples__slider {
  max-width: 100%;
}

.single-case-template_landbase .examples__slider {
  max-width: 100%;
}

.single-post .post__content .examples__slider {
  margin-left: 54px;
}
.examples .slide {
  transition: var(--transition);
  opacity: 0.5;
}

.examples .slide__image {
  border-radius: 5px;
  background: 50% / cover no-repeat;
}

.examples .slide__image {
  box-shadow: 0px 20px 70px -10px rgba(9, 31, 67, 0.22);
}

.examples .swiper-slide-active {
  opacity: 1;
}

.examples .swiper-button-next:after,
.examples .swiper-button-prev:after {
  display: none;
}

.examples .swiper-pagination {
  bottom: -60px;
  width: 180px !important;
}

.examples .swiper-button-prev,
.examples .swiper-button-next {
  width: 22px;
  height: 22px;
  z-index: 2;
}

.examples .swiper-button-prev svg,
.examples .swiper-button-next svg {
  display: none;
}

.examples .swiper-button-prev {
  left: -50px;
  background: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 14L8.46 12.775L3.42 7.875L18 7.875L18 6.125L3.42 6.125L8.46 1.225L7.2 9.63183e-07L-1.29539e-06 7L7.2 14Z' fill='black'/%3E%3C/svg%3E%0A")
    50% no-repeat;
  transition: var(--transition);
}

/* .examples.bg--white .swiper-button-prev {
  display: none;
} */

.examples.bg--blue .swiper-button-prev {
  background: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2 14L8.46 12.775L3.42 7.875L18 7.875L18 6.125L3.42 6.125L8.46 1.225L7.2 9.63183e-07L-1.29539e-06 7L7.2 14Z' fill='white'/%3E%3C/svg%3E%0A")
    50% no-repeat;
}

.examples .swiper-button-prev:hover {
  transform: scale(1.1);
}

.examples .swiper-button-next {
  right: -50px;
  background: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 0L9.54 1.225L14.58 6.125L0 6.125L0 7.875L14.58 7.875L9.54 12.775L10.8 14L18 7L10.8 0Z' fill='black'/%3E%3C/svg%3E%0A")
    50% no-repeat;
  transition: var(--transition);
}

.examples.bg--blue .swiper-button-next {
  background: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 0L9.54 1.225L14.58 6.125L0 6.125L0 7.875L14.58 7.875L9.54 12.775L10.8 14L18 7L10.8 0Z' fill='white'/%3E%3C/svg%3E%0A")
    50% no-repeat;
}

.examples .swiper-button-next:hover {
  transform: scale(1.1);
}

.examples.bg--white .swiper-button-prev,
.examples.bg--white .swiper-button-next,
.examples.bg--gray .swiper-button-prev,
.examples.bg--gray .swiper-button-next {
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5943 0.70697L12.047 2.4996L18.2362 9.67012L0.331848 9.67012L0.331848 12.231L18.2362 12.231L12.047 19.4015L13.5943 21.1942L22.4359 10.9506L13.5943 0.70697Z' fill='%23A5A9B6'/%3E%3C/svg%3E%0A");
}

.examples.bg--white .swiper-button-prev,
.examples.bg--gray .swiper-button-prev {
  transform: rotate(180deg);
}

.examples.bg--white .swiper-button-prev:hover,
.examples.bg--white .swiper-button-next:hover,
.examples.bg--gray .swiper-button-prev:hover,
.examples.bg--gray .swiper-button-next:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5943 0.70697L12.047 2.4996L18.2362 9.67012L0.331848 9.67012L0.331848 12.231L18.2362 12.231L12.047 19.4015L13.5943 21.1942L22.4359 10.9506L13.5943 0.70697Z' fill='%23121212'/%3E%3C/svg%3E%0A");
  transform: scale(1);
}

.examples.bg--white .swiper-button-prev:hover,
.examples.bg--gray .swiper-button-prev:hover {
  transform: scale(1) rotate(180deg);
}

.examples.bg--white .swiper-button-prev.swiper-button-disabled, 
.examples.bg--white .swiper-button-next.swiper-button-disabled,
.examples.bg--gray .swiper-button-prev.swiper-button-disabled, 
.examples.bg--gray .swiper-button-next.swiper-button-disabled {
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5943 0.70697L12.047 2.4996L18.2362 9.67012L0.331848 9.67012L0.331848 12.231L18.2362 12.231L12.047 19.4015L13.5943 21.1942L22.4359 10.9506L13.5943 0.70697Z' fill='%23E2E2E2'/%3E%3C/svg%3E%0A");
}

.examples .swiper-pagination-bullet {
  background: #fff;
}

.bg--gray.examples .swiper-pagination-bullet,
.examples.bg--white .swiper-pagination-bullet {
  background: #000;
}

.examples__text {
  margin-top: 122px;
  text-align: center;
  line-height: 170%; 
  font-size: var(--s);
  color: #333;
}

.examples__text + .examples__btn {
  margin-top: 25px;
}

.examples__btn {
  margin: 120px auto 0;
}

.examples .swiper-pagination-bullet-active-main {
  width: 26px;
  border-radius: 5px;
  transition: 0.3s ease;
}

.single-case-template_landbase .case__sections .examples__container {
  max-width: var(--container-width);
}

@media (max-width: 992px) {
  .single-post .examples:before {
    display: none;
  }

  .single-case-template_landbase .examples__slider {
    max-width: 80%;
  }

  .single-post .post__content .examples__slider {
    margin-left: 0;
  }

  .examples .swiper-button-prev {
    left: -30px;
  }

  .examples .swiper-button-next {
    right: -30px;
  }
}

@media (max-width: 760px) {
  .single-post .examples {
    padding: 35px 0 72px;
  }

  .examples__title + .examples__subtitle {
    margin-top: 25px;
  }

  .examples__title + .examples__slider,
  .examples__subtitle + .examples__slider {
    margin-top: 40px;
  }

  .examples .swiper-pagination {
    bottom: -50px;
  }

  .examples .swiper-button-prev {
    display: none;
  }

  .examples .swiper-button-next {
    display: none;
  }

  .examples__text {
    margin-top: 85px;
  }

  .examples__text + .examples__btn {
    margin-top: 20px;
  }

  .examples__btn {
    margin-top: 85px;
  }
}