¿Cómo puedo alinear mejor este botón con el contenido en el centro? Me parece descentrado.

El margin-top en el botón en sí mismo puede ser la respuesta, pero no me parece correcto. Si lo es, espero que una respuesta lo confirme. ¿Cuál es la mejor solución para bajar un poco el botón?

El CodePen para más contexto: https://codepen.io/AdanRod133/full/WNZEYJX

<div class="container">
  <img src="" alt="">
  <div class="content">
    <h3 class="body-title">
      Startup
    </h3>
    <p class="text-body">Crear sitios web en línea utilizando el constructor Startup Boostrap 5</p>
  </div>
  <button class="btn btn-learn">Aprender Más <i class="fas fa-arrow-right"></i></button>
</div>

body {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: coral;
  display: grid;
  grid-template-columns: 100px 300px 115px;
  grid-row-gap: 1em;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 100px;
  padding: 10px;
}

img {
  width: 100%;
  height: 100%;
  background-color: #2D8C9E;
}

.btn-learn {
  justify-self: center;
  align-self: center;
  height: 40px;
  border: none;
  border-radius: 10px;
  width: 125px;
}

.body-title {
  font-size: 1.15em;
  line-height: 1.5em;
  font-weight: bold;
  justify-self: center;
}

.text-body {
  font-size: 16px;
  grid-column: 3 / 5;
}