* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(30, 24, 24);
    width: 100vw;
}
.all {
    overflow: hidden;
    width: 900px;
    margin: auto;
    transition: .2s ease-in-out;
    border: 3px solid #ddd;
    box-shadow:  0 0 5px black;
}
.slidecontainer {
    position: relative;
    margin: auto;
    width: 900px;
    height: 500px;
    display: flex;
    transition: .4s ease-in-out;
}
.slidecontainer .imgcontain {
    width: 100%;
    height: 100%;
    clip-path: circle(0% at 0 50%);
    transition-property: clip-path;
    transition:  1s ease-in-out;
}
.slidecontainer .imgcontain.active {
    clip-path: circle(150% at 0 50%);
   
}
.slidecontainer img {
    
    width: 900px;
    height: 100%;
    object-fit: cover;
}
.but {
  width: 900px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 35%;  
  padding: 0 15px;
}
.but button {
    width: 40px;
    height: 40px;
    font-size: 20px;
}
.dot {
    position: absolute;
    display: flex;
    left: 50%;
    top: 68%;
    transform: translate(-50%,-50%);
}
.dot .btn{
    margin-left: 10px;
   background-color: white;
   border-radius: 50px;
   width: 15px;
   height: 10px;
   cursor: pointer;
}
.dot .btn.active {
    background-color: rgb(57, 57, 231);
}
@media screen and (max-width : 920px){
    .all {
        width: 700px;
        position: relative;
    }
    .but {
        position: absolute;
        width: 700px;
        top: 45%;
    }
}
@media screen and (max-width : 710px){
    .all {
        width: 500px;
        height: 400px;
        position: relative;
    }
    .but {
        position: absolute;
        width: 500px;
        top: 45%;
    }
    
    .slidecontainer  {
        width: 500px;
        
    }
    .slidecontainer .imgcontain {
        width: 100%;
    }
    .slidecontainer img {
        width: 500px;
        object-fit: cover;
    }
}