* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.slider {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slides {
    width: 700%;
    height: 100%;
    display: flex;
}

.slide {
    width: 14.2857%; /* 100% / 7 */
    transition: 0.6s;
}

.slide img {
    width: 100%;
    height: 100%;
}

input[type="radio"] {
    display: none;
}

.navigation-auto {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -40px;
}

.navigation-auto div {
    border: 2px solid #ffffff;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -14.2857%;
}

#radio3:checked ~ .first {
    margin-left: -28.5714%;
}

#radio4:checked ~ .first {
    margin-left: -42.8571%;
}

#radio5:checked ~ .first {
    margin-left: -57.1428%;
}

#radio6:checked ~ .first {
    margin-left: -71.4285%;
}

#radio7:checked ~ .first {
    margin-left: -85.7142%;
}