.slider {
margin: 40px 0;
}
.slider .swiper {
margin-left: -20px;
margin-right: -20px;
position: relative;
}
.slider .swiper .swiper-slide img {
width: 100%;
display: block;
}
.slider .swiper .swiper-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 10;
width: 100%;
pointer-events: none;
}
.slider .swiper .swiper-navigation .swiper-prev,
.slider .swiper .swiper-navigation .swiper-next {
pointer-events: all;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
}
.slider .swiper .swiper-navigation .swiper-prev svg,
.slider .swiper .swiper-navigation .swiper-next svg {
cursor: pointer;
width: 24px;
height: 24px;
}
.slider .swiper .swiper-navigation .swiper-prev svg path,
.slider .swiper .swiper-navigation .swiper-next svg path {
transition: fill 0.12s linear;
}
.slider .swiper .swiper-navigation .swiper-prev:hover svg path,
.slider .swiper .swiper-navigation .swiper-next:hover svg path {
fill: #FF0000;
}
@media (min-width: 600px) {
.slider .swiper {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1200px) {
.slider {
margin: 100px 0 100px;
}
.slider .swiper .swiper-navigation .swiper-prev,
.slider .swiper .swiper-navigation .swiper-next {
height: 48px;
width: 48px;
}
.slider .swiper .swiper-navigation .swiper-prev svg,
.slider .swiper .swiper-navigation .swiper-next svg {
width: 100%;
height: 100%;
}
}