:root {
    --widthP: 21%;
    --heightP:8%;
    --background-size: cover;
    --position: absolute;
}

.personaje {
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}


@media screen and (max-width: 450px) {
    :root {
        --widthP: 21%;
        --heightP: 8%;
        --background-size: cover;
        --position: absolute;
    }

    .personaje {
        width: var(--widthP);
        height: var(--heightP);
        background-size: var(--background-size);
        position: var(--position);
    }
}

@media screen and (max-width: 320px) {
    :root {
        --widthP: 18%;
        --heightP: 6%;
        --background-size: cover;
        --position: absolute;
    }
}

.personaje {
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.personaje-quieto {
    background-image: url(../images/Personaje/Personaje_quieto.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.personaje-descanso {
    background-image: url(../images/Personaje/Personaje_descanso.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.personaje-caminar {
    background-image: url(../images/Personaje/Personaje_camina.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.personaje-correr {
    background-image: url(../images/Personaje/Personaje_correr.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.quieto-left {
    background-image: url(../images/Personaje/Personaje_quieto1.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.descanso-left {
    background-image: url(../images/Personaje/Personaje_descanso1.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.caminar-left {
    background-image: url(../images/Personaje/Personaje_camina1.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}

.correr-left {
    background-image: url(../images/Personaje/Personaje_correr1.gif);
    width: var(--widthP);
    height: var(--heightP);
    background-size: var(--background-size);
    position: var(--position);
}