How can I make Image Tile responsive?

Question

I have a draft of the image tiles however they are not responsive and need to be contained to be aligned horizontally and then aligned vertically when the screen size changes to smaller. Can you please tell me what is missing in my code? Here is the code:

.linktile {
    position: relative;
    display: table;
    height: 300px;
    width: 400px;
}
.linktile img {
   max-width: 100%;
   height: auto;
    position: absolute;
}
.linktile .overlay {
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  display: table-cell;
}
.linktile p {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: lighter;
  line-height: 1.2;
  padding: 0 10%;
}

.linktile .huge {
  font-size: 1.5rem;
  font-weight: bold;
  background-color: red; 
  background-image: linear-gradient(to right, teal , orange);
  padding-top: 10px;
  padding-bottom: 10px;
}

a.linktile {
  text-decoration: none;
}

 

<a class="linktile" href="https://www.google.com">
<div class='linktile'>
  <img src='https://otaus.com.au/files/otx-knowledge.jpg'>
  <div class='overlay'>
      <p class="huge">OLDER PERSONS</p>
  </div>
</div>
</a> 

<a class="linktile" href="https://www.google.com">
<div class='linktile'>
  <img src='https://otaus.com.au/files/Z1P_7055.jpg'>
  <div class='overlay'>
      <p class="huge">OLDER PERSONS</p>
  </div>
</div>
</a> 

<a class="linktile" href="https://www.google.com">
<div class='linktile'>
  <img src='https://az659834.vo.msecnd.net/eventsairaueprod/production-otaus-public/c163eb2ef35f4ddc8fc492e1ff8e2ae3'>
  <div class='overlay'>
      <p class="huge">OLDER PERSONS</p>
  </div>
</div>
</a> 

Wanting to make may image tiles responsive and contained. This will enable different screen size to resize appropriately.