Título h2 está explodindo para fora do painel

Boa noite, o título do meu painel está explodindo para fora do painel. Já revisei, mas não consigo encontrar o que está diferente do que foi feito pelo professor.

style:

  .centralizado {
    text-align: center;
  }

  .corpo {
    font-family: Helvetic, sans-serif;
    margin: 0 auto;
    width: 96%;
  }

  .lista-fotos {
    list-style: none;
  }

  .lista-fotos .lista-fotos-item {
    display: inline-block;
  }

  .imagem-responsiva {
    width: 100%;
  }

  /* estilo do painel */

  .painel {
    padding: 0 auto;
    border: solid 2px grey;
    display: inline-block;
    margin: 5px;
    box-shadow: 5px 5px 10px grey;
    width: 200px;
    height: 100%;
    vertical-align: top;
    text-align: center;
  }

  .painel .painel-titulo {
    text-align: center;
    border: solid 2px;
    background: lightblue;
    margin: 0 0 15px 0;
    padding: 10px;
    text-transform: uppercase;
  }

Template:

    <ul class='lista-fotos'>
      <li class="lista-fotos-item" v-for="foto of fotos">

        <div class="painel">
          <h2 class="painel-titulo">{{ foto.titulo }}</h2>
          <div class="painel-corpo">

            <img class="imagem-responsiva" v-bind:src="foto.url" v-bind:alt="foto.titulo">

          </div><!-- fim painel-corpo -->
        </div><!-- fim painel -->

      </li>
    </ul>