.content {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
}
.slider {
position: relative;
width: 100%;
display: flex;
overflow: hidden;
}
.slider .slider-inner {
display: flex;
width: 100%;
transition: all .3s;
}
.slider .slide {
flex: none;
width: 100%;
}
.slider .indicators {
display: flex;
position: absolute;
bottom: 20px;          
left: 50%;
transform: translateX(-50%);
z-index: 1;
gap: 4px;
}
.slider .indicators .indicator {
margin: 0px 5px;
width: 10px;
height: 10px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 4px;
opacity: .6;
cursor: pointer;
transition: all .3s;
}
.slider .indicators .indicator[active] {
width: 15px;
opacity: 1;
}
.slider .arrows {
display: flex;
align-items: center;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.slider .arrows .arrow-prev,
.slider .arrows .arrow-next {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 30px;
height: 30px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 4px;
opacity: .6;
cursor: pointer;
transition: all .3s;
}
.slider .arrows .arrow-prev:hover,
.slider .arrows .arrow-next:hover {
opacity: .8;
}
.slider .arrows .arrow-prev {
left: 50px;
}
.slider .arrows .arrow-next {
right: 50px;
}
.slider .arrows .arrow-prev .fas,
.slider .arrows .arrow-next .fas {
color: #4b4b4b;
opacity: .5;
}
@media screen and (max-width: 720px) {
.content {
height: 80vh;
object-fit: cover;
}
}