.HomepageProjects {
  background-color: #000;
}

.HomepageProjects-title {
  background-color: var(--colorBodyBg);
}

.HomepageProjects-title h2 {
  line-height: clamp(60px, 8vw, 95px);
  font-size: clamp(40px, 8vw, 90px);
  font-weight: 700;
  margin-bottom: 0;
  padding-bottom: var(--spaceSm);
  text-transform: uppercase;
}

.HomepageProjects-wrapper {
  background-color: #000;
  padding-right: 0;
  margin: 0 auto;
  display: grid;
  grid-template: 'text img'
 'btn btn' 200px / 1fr 3fr;
  gap: clamp(20px, 3vw, 40px);
}

.HomepageProjects-info-swiper {
  grid-area: text;
  padding: 30px 0;
  border-bottom: 1px solid #fff;
  overflow: hidden;
  position: relative;
}

.HomepageProjects-info-swiper .swiper-wrapper {
  height: 100%;
  position: relative;
  width: 100%;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transform: translate3d(0, 0, 0);
}

.HomepageProjects-img-swiper {
  grid-area: img;
  overflow: hidden;
  position: relative;
}

.HomepageProjects-img-swiper-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transform: translate3d(0, 0, 0);
}

.HomepageProjects-img-swiper-slide {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  transition-property: transform;
  text-align: center;
}

.HomepageProjects-img-swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.HomepageProjects-img-swiper-slide-vizualisation {
  position: absolute;
  top: 100%;
  right: 15%;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-right: 1px solid #fff;
  padding: 30px 20px 0;
  display: grid;
  place-items: end;
}

.HomepageProjects-swiper-button-prev, .HomepageProjects-swiper-button-next {
  position: absolute;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #000;
  top: 50%;
  transform: translate(0, -50%);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.HomepageProjects-swiper-button-prev:hover, .HomepageProjects-swiper-button-prev:active, .HomepageProjects-swiper-button-prev:focus, .HomepageProjects-swiper-button-next:hover, .HomepageProjects-swiper-button-next:active, .HomepageProjects-swiper-button-next:focus {
  background-color: var(--colorBrand);
}

.HomepageProjects-swiper-button-prev.swiper-button-disabled, .HomepageProjects-swiper-button-next.swiper-button-disabled {
  display: none;
}

.HomepageProjects-swiper-button-prev {
  left: clamp(10px, 4vw, 30px);
}

.HomepageProjects-swiper-button-prev svg {
  margin-left: -5px;
}

.HomepageProjects-swiper-button-next {
  right: clamp(10px, 4vw, 30px);
}

.HomepageProjects-swiper-button-next svg {
  margin-right: -5px;
}

.HomepageProjects-buttonAll {
  grid-area: btn;
  min-width: 280px;
  width: fit-content;
  place-self: center;
}

.HomepageProjects-swiper-pagination {
  height: 40px;
  gap: 10px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
}

.HomepageProjects-swiper-pagination .swiper-pagination-bullet {
  height: 8px;
  width: 8px;
  background: no-repeat center/cover url("/frontend/images/pagination-bullet.svg");
  display: block;
  cursor: pointer;
}

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

@media (max-width: 1440px) {
  .HomepageProjects-wrapper {
    grid-template: 'text img'
 'btn btn' 200px / 1fr 2fr;
  }
}

@media (max-width: 1140px) {
  .HomepageProjects-wrapper {
    grid-template: 'text img'
 'btn btn' 200px / 1fr 1fr;
  }
}

@media (max-width: 800px) {
  .HomepageProjects-wrapper {
    grid-template: 'text'
 'img'
 'btn' 200px / 1fr;
    padding-right: var(--sizeContentOffset);
  }
  .HomepageProjects-info-swiper {
    border: none;
  }
}

/*# sourceMappingURL=projects.min.css.map */