sample {
    background-color: blue;
    background-color: yellow;
    background-color: orange;
    background-color: greenyellow;
}

/* Extra large devices (large laptops & desktops, 1200px and up) */
@media (max-width: 1600px) {
    .index {
        padding: 6rem 10rem 0;
    }
    .index main {
        /*background-color: blue;*/
    }
}


/* Medium devices (landscape tablets, 768px - 991px) */
@media (max-width: 1366px) {
    .index {
        padding: 5rem 6rem 0;
    }
    .index main {
        /*background-color: yellow;*/
    }
}


/* Small devices (portrait tablets, large phones, 576px - 767px) */
@media (max-width: 1024px) {
    .index {
        padding: 4rem;
    }
    .index main {
        /*background-color: orange;*/
        flex-wrap: wrap;
    }
    .index .form-side {
        flex-basis: 100%;
        order: 2;
        padding: 2rem 2rem 4rem;
    }
    .index .photos-side {
        flex-basis: 100%;
        /*order: 1;*/
        min-height: 200px;
    }
    /*.index .form-side .image-wrap {
        text-align: center;
    }*/
    .index .form-side .line {
        width: 100%;
    }
    .index .form-side .the-form {
        width: 100%;
    }
}

/* Extra small devices (phones, 576px and below) */
@media (max-width: 767px) {
    .index {
        padding: 1.5rem;
    }
    .index main {
        /*background-color: greenyellow;*/
    }
    .index .photos-side {
        /*flex-basis: 100%;*/
        /*order: 1;*/
        min-height: 140px;
    }
    .index .form-side {
        /*flex-basis: 100%;
        order: 2;*/
        padding: 1.5rem 1.5rem 3rem;
    }
    .index .form-side .credential .field .show-password {
        margin-right: 30px;
    }
    .index .form-side .the-form .buttons {
        gap: 1rem;
    }
    .index .form-side .the-form .buttons .submit-btn {
        width: 100%;
        padding: 10px 20px;
    }
    .index .form-side .the-form .buttons .forgot {
        margin: 0;
    }
}