<style>
   div {
      width: max-content;
   }
   #greenbox-icon-1 {
      width: 100%;
      max-height: 50px;
   }
   #greenbox-icon-2 {
      width: 100%;
      min-height: 50px;
   }
   #greenbox-icon-3 {
      width: 50%;
      max-height: 10px;
   }
   #greenbox-icon-4 {
      width: 50%;
      min-height: 10px;
   }
   #greenbox-icon-5 {
      width: 100%;
      min-height: 50px;
      max-height: 20px;
   }
   #circles-landscape-1 {
      width: 100%;
      max-height: 50px;
   }
   #circles-landscape-2 {
      width: 100%;
      min-height: 50px;
   }
   #circles-landscape-3 {
      width: 50%;
      max-height: 50px;
   }
   #circles-landscape-4 {
      width: 50%;
      min-height: 50px;
   }
   #circles-landscape-5 {
      width: 100%;
      min-height: 50px;
      max-height: 20px;
   }
</style>

<div><img id="greenbox-icon-1" src="resources/greenbox.png"></div>
<div><img id="greenbox-icon-2" src="resources/greenbox.png"></div>
<div><img id="greenbox-icon-3" src="resources/greenbox.png"></div>
<div><img id="greenbox-icon-4" src="resources/greenbox.png"></div>
<div><img id="greenbox-icon-5" src="resources/greenbox.png"></div>
<div><img id="circles-landscape-1" src="resources/circles-landscape.png"></div>
<div><img id="circles-landscape-2" src="resources/circles-landscape.png"></div>
<div><img id="circles-landscape-3" src="resources/circles-landscape.png"></div>
<div><img id="circles-landscape-4" src="resources/circles-landscape.png"></div>
<div><img id="circles-landscape-5" src="resources/circles-landscape.png"></div>