How to add text to the same <figure> under the image?

So, here is my code, but problem is that text is right to the image, but not under the image. How to add it correctly?

figure { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
}

figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="img/books/2019/Rhonda Byrne - Paslaptis.jpg" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>

Solution

body { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
 }
figure > img {
  display: block;
  margin-bottom: 4px;
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}
figcaption {
  width: auto;
  text-align: center;
  margin: 5px auto;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="http://via.placeholder.com/640x360" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>