.container-flex {
  width: 100%;
  height: 800px;
  display: flex;
  overflow: hidden;
}

.container-flex .container-flex-son {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.container-flex .container-flex-son img:first-child {
  flex-grow: 5;
  filter: contrast(120%);
}

.container-flex .container-flex-son img {
  width: 100%;
  height: 0;
  flex-grow: 1;
  object-fit: cover;
  transition: 0.5s ease;
}

.container-flex .container-flex-son img:hover {
  flex-grow: 5;
  filter: contrast(120%);
}

.container-flex .container-flex-son:hover img:first-child {
  flex-grow: 1;
  filter: contrast(100%);
}

.container-flex .container-flex-son img:first-child:hover {
  flex-grow: 5;
  filter: contrast(120%);
}

@media (min-width: 1024px) {
  .container-flex {
    width: 100%;
    height: 500px;
    display: flex;
    gap: .5;
    justify-content: center; 
    align-items: stretch;
    overflow: hidden;
  }

  .container-flex .container-flex-son {
    /* Forzamos a que el contenedor de las imágenes sea un tanque que ocupe todo */
    width: 100%; 
    min-width: 100%; 
    flex-direction: row;
    gap: .5rem; /* Si quieres eliminar el blanco entre fotos, ponlo en 0 */
  }

  .container-flex .container-flex-son img {
    /* Cambiamos el width inicial de 0 a 1% para ayudar al navegador con el cálculo */
    width: 1%; 
    height: 100%;
    flex-grow: 1;
    object-fit: cover;
    transition: 0.5s ease;
  }
}