:root {
  --swiper-navigation-size: 44px
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  text-align: center;
  font-size: 18px;
  background: #fff;
  justify-content: center;
  align-items: center;
}

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

.swiper-button-next,
.swiper-button-prev{
  position: absolute;
  top: var(--swiper-navigation-top-offset,50%);
  width: calc(var(--swiper-navigation-size)/ 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset,30px);
  right: auto
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset,30px);
  left: auto
}

.overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    rgba(34, 34, 34, 0.6), 
    rgba(34, 34, 34, 0.6));
}

@media (max-width: 720px) {
  .swiper-button-next,
  .swiper-button-prev{
    display: none;
  }
}
@media (max-width: 520px) {
  .swiper-button-next,
  .swiper-button-prev{
    display: none;
  }
}