.slider{
width: 700px;
max-width: 100vw;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.slider .list{
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s;
}
.slider .list img{
width: 700px;
max-width: 100vw;
height: 100%;
object-fit: cover;
}
.slider .buttons{
position: absolute;
top: 45%;
left: 5%;
width: 90%;
display: flex;
justify-content: space-between;
}
.slider .buttons button{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: #fff5;
color: #fff;
border: none;
font-family: monospace;
font-weight: bold;
cursor: pointer;
}
.slider .buttons button:hover {
border: 3px solid #fff;
}
.slider .dots{
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.slider .dots li{
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
}
.slider .dots li.active{
width: 30px;
}
@media screen and (max-width: 768px){
.slider2{
    width: 350px;
height: 400px;
}

}
.slider2{
width: 700px;
max-width: 100vw;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.slider2 .list2{
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s;
}
.slider2 .list2 img{
width: 700px;
max-width: 100vw;
height: 100%;
object-fit: cover;
}
.slider2 .buttons2{
position: absolute;
top: 45%;
left: 5%;
width: 90%;
display: flex;
justify-content: space-between;
}
.slider2 .buttons2 button{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: #fff5;
color: #fff;
border: none;
font-family: monospace;
font-weight: bold;
cursor: pointer;
}
.slider2 .buttons2 button:hover {
border: 3px solid #fff;
}
.slider2 .dots2{
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.slider2 .dots2 li{
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
cursor: pointer;
}
.slider2 .dots2 li2.active{
width: 30px;
}
@media screen and (max-width: 768px){
.slider2{
    width: 350px;
height: 400px;
}