.container22 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Esto mantiene la relación de aspecto de la imagen */
}

.container22 img {
    position: absolute;
    width: 100%;
}

.thermometer {
    position: absolute;
    top: 48%; /* Ajusta este valor según sea necesario */
    left: 23%; /* Ajusta este valor según sea necesario */
    width: 41%; /* Ajusta este valor según sea necesario */
    height: 14.7%; /* Ajusta este valor según sea necesario */
    border-radius: 25px;
    /* background-color: #ccc; */
    transform: translateY(-50%);
}

.fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 96%;
    width: 45%; /* Puedes cambiar el porcentaje según sea necesario */
    border-radius: 25px; 
    background-color:rgb(0, 182, 16); /* Color de relleno */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Color del texto */
    font-size: 3vw; /* Tamaño del texto */
    font-weight: bold; /* Hace que el texto sea más grueso */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Aquí agregamos la sombra al texto */

}
.fill2 {
    position: absolute;
    top: 0;
    left: 108%;
    height: 96%;
    width: 45%; /* Puedes cambiar el porcentaje según sea necesario */
    border-radius: 25px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Color del texto */
    font-size: 5vw; /* Tamaño del texto */
    font-weight: bold; /* Hace que el texto sea más grueso */
    text-shadow: 8px 2px 4px rgba(0, 0, 0, 0.5); /* Aquí agregamos la sombra al texto */

}