Knacss hauteur différente dans une grille

Bonjour à tous,

J'ai ce code

<section id="categorie" class="grid-1">
  <div class="grid-12 has-gutter-l">
    <div class="col-10">
      <div><img src="logo.png"></div>
      <div><p>Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, quae Isauriae scopulis sunt controversa.

Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.</p></div>
      </div>
      <div class="right"><a href=""><img src="image 1.jpg"></a></div>
      <div class="right"><a href=""><img src="image 2.png"></a></div>
    </div>
  </div>
</section>

image 1 et image 2 font 300px de hauteur, dans cette configuration la grille réduit les images 121px alors que je suis en mode "large" et il largement assez de place pour les afficher avec leurs vrai hauteur. Bien sûr plus je réduit largeur de mon écran et elles sont réduites. Comment faire pour que la grille utilise la pleine hauteur lorsqu'il y a la place ?