jak to dobrze wyświetlić ?

Cześć mam problem z wyświetleniem prawidłowo boxów. Chciałbym żeby wyglądało to dobrze na urządzeniach mobilnych. A wygląda to troche słabo. Chciałbym żeby zdjęcie było wyśrodkowane i żeby box przy urządzeniach mobilnych miały 100%. Oto kod html i css.
Proszę o pomoc

<div class="test">
        <div class="box">
            <img
                src="https://bi.im-g.pl/im/f4/4d/18/z25483508V,Kielce--konkurs--Zycie-jest-piekne---Edycja-2019--.jpg" />
            <span><a href="https://wwww.google.pl">Lorem ipsum</a></span>
        </div>
        <div class="box">
            <img
                src="https://bi.im-g.pl/im/f3/4d/18/z25483507V,Prawie-1600-zdjec-nadeslano-w-tegorocznej-edycji-k.jpg" />
            <span><a href="https://www.google.pl">Lorem ipsum</a></span>
        </div>
        <div class="box">
            <img
                src="https://bi.im-g.pl/im/a9/4d/18/z25483433V,Kielce--konkurs--Zycie-jest-piekne---Edycja-2019--.jpg" />
            <span><a href="https://www.google.pl">Lorem
                    ipsum</a></span>
        </div>

    </div>

.test {
  width: 100%;
}

.box {
  display: inline-block;
  width: 33%;
}

img {
  height: 407px;
}

span {
  display: block;
  margin: 50px auto;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  max-width: 350px;
  background-color: blue;
  padding: 20px 30px;
  text-align: center;
}

span a {
  color: white;
  text-decoration: none;
  width: auto;
}

@media screen and (max-width: 600px) {
  .box {
    width: 100%;
  }
}