CSS Erro de alinhamento na grid e box

[Impts]

Eu estou tentando fazer com que fique 3 caixas na horizontal de onde vai ficar a foto, porém, não estou conseguindo alinhar, vou deixar uma foto de como eu queria que ficasse.

 

    <section class="grid1">
      <div class="grid1-item">
        <img src="./img/foto1.png">
      </div>
      <div class="grid1-item">
        <p><h1>Titulo 1</h1></p>
        <p>Descrição</p>
        <p><a href="">Link</a></p>
      </div>
      <div class="grid1-item">
      <p><h1>Titulo 1</h1></p>
        <p>Descrição</p>
        <p><a href="">Link</a></p>
      </div>
       <div class="grid1-item">
        <p><h1>Titulo 1</h1></p>
        <p>Descrição</p>
        <p><a href="">Link</a></p>
      </div>
    </section>

 

.grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  margin: 0 auto;
  max-width: 175vh;
  padding: 5vh;
}

.grid1-item:nth-child(1) {
  grid-row: 1 / 3;
  background: black;
}

.grid1-item {
  display: grid;
}

.grid1-item img {
  grid-column: 1;
  grid-row: 1/3;
  align-self: end;
}

.grid1-item p {
  background: red;
  padding: 25px;
  color: white;
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  height: 10px;
}

 

[thefill]

Oi senhor @Impts !

Boa noite!

 

Eu fiz dessa forma:

 

Não ficou igual a sua foto mas já é um começo!

 

Para isso eu só alterei duas linhas do seu CSS.

 

A linha 3 ficou assim:

  grid-template-columns: repeat(2, 1fr);

 

E a linha 11, que ficou assim:

  grid-row: 1 / 4;