.slider-container { position: relative; margin-left: -1rem; margin-right: -1rem; }
.slider { position: relative; overflow: hidden; }
.swiper-slide { padding: 1rem; }

:root {
	--slider-color-button: var(--color-red);
	--slider-color-button-hover: white;
	--slider-color-arrow: var(--color-white);
	--slider-color-arrow-hover: black;
	--swiper-pagination-bullet-size: 10px; 
	--swiper-pagination-color: var(--color-green);
	--swiper-pagination-bullet-inactive-color: black; 
	--swiper-pagination-bullet-inactive-opacity: 1;
}

.swiper-button-next { position: absolute; right: -3rem; top: 50%; transform: translate(0, -50%); }
.swiper-button-prev { position: absolute; left: -3rem; top: 50%; transform: translate(0, -50%); }

.swiper-button-prev,
.swiper-button-next { width: 3rem; height: 3rem;  color: white; margin-top:0; background: var(--slider-color-button); border-radius: 50%; }

.swiper-button-prev::after { --image: url(../img/icons/arrow-left.png);  }
.swiper-button-next::after { --image: url(../img/icons/arrow-right.png); } 

.swiper-button-prev::after,
.swiper-button-next::after { width: 60%; height: 60%; content: ''; background: var(--slider-color-arrow); mask: var(--image) center/contain no-repeat;; -webkit-mask: var(--image) center/contain no-repeat;; }

.swiper-button-prev:hover,
.swiper-button-next:hover { background: var(--slider-color-button-hover); box-shadow: 0 0 10px #0002; }

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after { background: var(--slider-color-arrow-hover); }

.swiper-pagination { position: relative; margin-top: 4rem; }



@media screen and (max-width: 640px) {
	.swiper-button-next { right: 1rem; left: auto; }
	.swiper-button-prev { left: 1rem; right: auto; }
}