Cómo evitar que se pierda la proporción y relación de todo al variar el zoom?

Hola! Si bien me interesa saber si hay alguna solución general como para que toda la página se adapte a las variaciones del zoom, en particular para mi código, creo que el problema está en el texto "Cabello + Barba" que como es muy largo, al hacer zoom se acomoda en 2 renglones y hace que la última caja quede más larga y la imagen se desaliñe con las otras dos. El html es igual al del profe, pero buscando solucionar esto, el css hasta ahora me quedó así:

header {
    background-color: #BBBBBB;
    padding:20px 0 ;
}

.caja {
    width: 80%;
    position: relative;    
    margin: 0 auto;
}
nav {
    position: absolute;
    top: 42%;
    right: 0%;
}


nav li {
    display: inline; 
    margin: 0 0 0 15px;   
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;    
}

.productos {    
    width: 90%;
    height: 95%;
    padding: 05%;
    position: relative;    
    margin: 0 auto;
    text-align: center;    
    box-sizing: border-box;  

}

.productos h2 {         
    font-size: 180%;
    font-weight: bold;
    display: inline-block;                
}

.productos li {
    display: inline-block;
    width: 30%;
    height: 30%;    
    vertical-align: top;    
    margin: 0 1%;
    padding: 3% 2%;
    box-sizing: border-box;      

}

.productos img { 
    width: 90%; 
    object-fit: contain;
}

.producto_descripción {
    font-size: 140%;         
}

.producto_precio {
    font-size: 180%;
    font-weight: bold;
    margin-top: 10px; 
    box-sizing: border-box;    
}