grid overflow issue

When creating a fixed aspect ratio div using the padding-top method, the div will overflow its grid container

HTML

<div id = "content">

  <div class = "topic">
    <div class = "ratio-16-9">
      <p>This p element is in a div with an aspect ratio of 16:9.</p>
    </div>
  </div>
  
  <div class = "topic">
  </div>
  
  <div class = "topic">
  </div>
  
  <div class = "topic">
    <div>
      <!-- Uncomment the line below and things work propperly. -->
      <!--<p>This p element is in a propperly sized div and it works as one might expect it to.</p>-->
    </div>
  </div>

</div>

CSS

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  height:100%;
  width: 100%;
}

body {
  background-color:#404040;
  min-height:100%;
  width:100%;
}

p {
  color:#f0f0f0;
  text-align:center;
}

#content {
  display:grid;
  /* grid-template-columns:auto; */
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto auto;
}

.topic {
  background-color:#808080;
  min-height:100px;
  margin:8px;
  padding:8px;
}

.ratio-16-9 {
  background-color:#0080f0;
  padding-top:56.25%;
  /* If you comment out the line above and uncomment the line below, things work propperly, but the aspect ratio is not maintained. */
  /*height:300px;*/
  position:relative;
}

.ratio-16-9 > p {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}