Responsive Image Grid

HTML

<div id="wrapper">
    <div class="inner-wrap">
        <div class="inner-box">
            <img src="https://skydocbucketversion.s3.amazonaws.com/1537368418397_Screenshot_20180827090609618_lockscreen.png?AWSAccessKeyId=AKIAIMVZ6OTHMIRJPNLQ&Expires=1537424914&Signature=aAzo9XdClKZCqKPHgxwDQqRy4bM%3D"/>
        </div>
    </div>
    <div class="inner-wrap">
        <div class="inner-box">
            <img src="http://img832.imageshack.us/img832/4671/img03v.png"/>
        </div>
    </div>
    <div class="inner-wrap">
        <div class="inner-box">
            <img src="http://img705.imageshack.us/img705/9566/img04q.png"/>
        </div>
    </div>
    <div class="inner-wrap">
        <div class="inner-box">
            <img src="http://img687.imageshack.us/img687/479/img01jt.png"/>
        </div>
    </div>
</div>

CSS

.inner-wrap {
      float: left;
      position: relative;
      width:50%; /* Or any other width value for a responsive grid */
    padding-bottom:50%; /* This is the setting I think I need to remove, but I can't seem to get it to work without it */    
   
    }

.inner-box {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      bottom: 10px;      
	  padding:0px;
     background-color:red;
	  }
	  
.inner-box img {
      width: 100%;
	  position:absolute;
      top:0;
      bottom:0;
      margin:auto;	  
    }