:root {
  --sdc-gallery-color: #000;
  --sdc-gallery-width: 1440px;
  --sdc-gallery-background-color: #ccc;
  --sdc-gallery-content-width: 1200px;
  --sdc-gallery-padding: 20px;
  --sdc-gallery-icon-padding: 100px;
  --sdc-gallery-navigation-color: #222;
  --sdc-gallery-navigation-border-color: #ccc;
}

.sdc-gallery {
  --swiper-theme-color: var(--sdc-gallery-color);
  --sdc-slope-background-color: var(--sdc-gallery-background-color);
  --sdc-slope-angle: 3deg;
  --sdc-slope-max-width: var(--sdc-gallery-width);
  background-color: var(--sdc-gallery-background-color);
  max-width: var(--sdc-gallery-width);
  margin: 0 auto calc(tan(var(--sdc-slope-angle))* min(100vw, var(--sdc-slope-max-width))) auto;
  padding-top: var(--sdc-gallery-padding);
}

.sdc-gallery-wrapper {
  position: relative;
  overflow: hidden;
  max-width: var(--sdc-gallery-content-width);
  margin: 0 auto;
  padding: 0 var(--sdc-gallery-icon-padding) 32px;
}

.sdc-gallery-swiper.swiper {
  padding-bottom: var(--spacing-64);
  max-width: 97%;
  margin-left: 0;
  overflow: visible;
}

.sdc-gallery h2 {
  max-width: var(--sdc-gallery-content-width);
  font-size: 2.5rem; 
  margin-top: 0;
}

.sdc-gallery img {
  width: 100%;
}

.sdc-gallery p {
  line-height: 1.5;
}

.sdc-gallery .progress-bar {
  display: flex;
  border-bottom: 1px solid var(--sdc-gallery-navigation-border-color);
  width: 100%;
  height: 1px;
}

.sdc-gallery .progress {
  display: flex;
  background-color: var(--sdc-gallery-navigation-color);
  padding-top: 3px;
}

.sdc-gallery .swiper-pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--spacing-16);
  max-width: 600px;
  transform: translateX(-50%);
  left: 50%;
}

.sdc-gallery .swiper-button-prev,
.sdc-gallery .swiper-button-next {
  top: 30%;
}

.sdc-gallery .swiper-button-prev {
    left: 0px;
    right: auto;
}

.sdc-gallery .swiper-button-next {
    right: 0px;
    left: auto;
}

.sdc-gallery .swiper-button-prev:after {
  content: url('icons/arrow_backward.svg');
  font-size: inherit;
}

.sdc-gallery .swiper-button-next:after {
  content: url('icons/arrow_forward.svg');
  font-size: inherit;
}

.sdc-gallery .swiper-button-next, .sdc-gallery .swiper-button-prev {
  display: none;
}

@media screen and (width >= 768px) {
  .sdc-gallery-swiper.swiper {
    max-width:100%;
    overflow: hidden;
  }
  .sdc-gallery .swiper-button-prev {
      left: var(--spacing-24);
      right: auto;
  }
  .sdc-gallery .swiper-button-next {
    right: var(--spacing-24);
    left: auto;
  }
  .sdc-gallery .swiper-button-next, .sdc-gallery .swiper-button-prev {
    display: flex;
  }
}


@media screen and (width >= 968px) {
  .sdc-gallery-swiper-slide {
    max-width: 50%;
  }
  .sdc-gallery-swiper.swiper {
    max-width: inherit;
    margin: 0 auto;
    overflow: hidden;
  }
  .sdc-gallery .swiper-button-prev {
    left: var(--spacing-24);
    right: auto;
  }
  .sdc-gallery .swiper-button-next {
    right: var(--spacing-24);
    left: auto;
  }
} 

@media screen and (width >= 1154px) { 
  .sdc-gallery .swiper-button-prev {
    left: 0;
    right: auto;
  }
  .sdc-gallery .swiper-button-next {
    right: 0;
    left: auto;
  }
}