How do I add a banner under image that scales? html/css

1

In my website, I want the banner to scale to the bottom of the image at full size, but as I change the size of the window the banner changes positions. How would I get this to attach to the bottom of the image?

HTML

<section>
  <div class="hero-image">
    <div class="container">
      <h1><span> Meeshka's Freedom Art </br> Summer Program </span></h1>
    </div>
  </div>
</section>

CSS

.hero-image {
  display: fixed;
  overflow: hidden;
  background: url(https://i.imgur.com/AgF0bKB.jpg) no-repeat center;
  background-size: cover;
  height: 60em;
  width: 100%;
}
.container {
  position: relative;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: white;
  background-color: rgba(119, 61, 189, 0.5);
  height: 8em;
  text-align: center;
  padding: 3%;
}
.container h1 {
  font-family: "roboto";
  font-size: 4vw;
  letter-spacing: 0.05em;
}

code: https://codepen.io/daniel-albano/pen/ExaedBr?editors=0100