CSS - 为什么这个网格中有很大的空间？

Question

It's supposed to look like the same to the left and to the right, but there's a big space between titulo-valores (the title) and texto-valores (the text) in the second image for some reason, and it probably has something to do with the image. How to make the text close to the title, and by the left side of the image?

HTML:

<div class="setor-valores">
        <div class="valores-esq">
            <img src="../assets/images/cp/sobre-cid-1.jpg" alt="sobre-cidade1" class="imagem-esq">
            <br><br>
            <p class="titulo-valores">Liberdade</p>
            <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
        </div>

        <div class="valores-dir">
            <img src="../assets/images/cp/sobre-cid-2.jpg" alt="sobre-cidade2" class="imagem-dir">
            <br><br>
            <p class="titulo-valores">Liberdade</p>
            <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
        </div>

        <div class="valores-esq">
            <img src="../assets/images/cp/sobre-cid-3.jpg" alt="sobre-cidade3" class="imagem-esq">
            <p class="titulo-valores">Liberdade</p>
            <p class="texto-valores">O que define a nossa ética é: nenhum indivíduo deve ter poder para tomar decisões sobre a vida de outro. Assim, liberdade de escolha de cada indivíduo sobre o que irá afetar sua própria vida é fundamental. Por isso governança privada é tão importante: permite que indivíduos tenham escolha e poder no convívio em sociedade. Deste modo, todos têm liberdade na busca de sua própria felicidade, à sua maneira.</p>
        </div>
    </div>

CSS:

.valores-esq {
    display: grid;
    gap: calc(10px + 3vw);
    grid-template-areas: 
    'imagem imagem titulo titulo'
    'imagem imagem texto texto';
    margin-right: 10vw;
    row-gap: 1px;
    text-align: left;
}

.valores-dir { /* PROBLEM HERE */
    display: grid;
    grid-template-areas: 
    'titulo titulo imagem imagem'
    'texto texto imagem imagem';
    text-align: left;
    margin-left: 5vw;
}

.imagem-esq {
    grid-area: imagem;
    height: calc(30px + 18vw);
    width: calc(85px + 45vw);
    object-fit: cover; 
    object-position: 100% 0;
    border-radius: 0px 30px 30px 0px;
}

.imagem-dir { /* PROBLEM HERE */
    height: calc(30px + 18vw);
    width: calc(85px + 45vw);
    object-fit: cover; 
    object-position: 0 100%;
    border-radius: 30px 0px 0px 30px;
}

.titulo-valores {
    grid-area: titulo;
    font-family: Martel;
    font-size: 20px;
}

.texto-valores {
    grid-area: texto;
    font-family: Martel;
    font-size: 15px;
}

I have tried making the text smaller but it stayed in the same place, so that's not the problem.

Answer 1

I think the only thing missing is the grid-area definition for the imagem-dir class:

.imagem-dir {
  /* ... */
  grid-area: imagem;
}

Since both imagem-dir and imagem-esq have the same style definitions you could consider either using only one class, or writing your CSS as follows:

.imagem-esq,
.imagem-dir {
  height: calc(30px + 18vw);
  width: calc(85px + 45vw);
  object-fit: cover;
  grid-area: imagem;
  object-position: 0 100%;
  border-radius: 30px 0px 0px 30px;
}

If different definitions should become necessary, you can simply define the adjustments for this class separately, eg like this

.imagem-esq,
.imagem-dir {
  height: calc(30px + 18vw);
  width: calc(85px + 45vw);
  object-fit: cover;
  grid-area: imagem;
  object-position: 0 100%;
  border-radius: 30px 0px 0px 30px;
}

.imagem-dir {
  background: green;
}

Your complete CSS could then look like this:

.valores-esq,
.valores-dir {
  display: grid;
  text-align: left;
  gap: calc(10px + 3vw);
}

.valores-esq {
  grid-template-areas:
    'imagem titulo'
    'imagem texto';
  margin-right: 10vw;
  row-gap: 1px;
}

.valores-dir {
  grid-template-areas:
    'titulo imagem'
    'texto imagem';
  margin-left: 5vw;
}

.imagem-esq,
.imagem-dir {
  height: calc(30px + 18vw);
  width: calc(85px + 45vw);
  object-fit: cover;
  grid-area: imagem;
  object-position: 0 100%;
  border-radius: 30px 0px 0px 30px;
}

.titulo-valores,
.texto-valores {
  font-family: Martel;

}

.texto-valores {
  grid-area: texto;
  font-size: 15px;
}

.titulo-valores {
  grid-area: titulo;
  font-size: 20px;
}