Layout challooonge!

HTML

<!--
  Goal:
  Stop wrapper's content from growing outside its max height!
  Instead have the image shrink while keeping it's aspect ratio
  while the caption stays at the bottom
  
  do not remove picture tag or the max-width of the image
-->

<div class="wrapper">
  <picture>
    <img src="https://images.theconversation.com/files/350865/original/file-20200803-24-50u91u.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1200&h=1200.0&fit=crop" />
  </picture>
  <div class="caption">This is a responsible cat</div>
</div>

CSS

html, body { height: 100%; }
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #202227;
  justify-content: center;
  align-items: center;
  color: #fafafa;
  border: 2px solid pink;
  text-align: center;
}

.wrapper {
  padding: 10px;
  background: #37393d;
  border: 5px solid #36badd;
}

img {
  width: 100%;
  max-width: 400px;  
  max-height: 100vh;
  object-fit: contain;
}