Como colocar uma imagem alinhada com outras no CSS | Front-end

Preciso colocar uma Imagem grande e outras quatro imagens do lado no formato de uma janela (Segue o exemplo:) (https://cdn1.gnarususercontent.com.br/1/1130103/15f42faa-4822-4bb6-b4f1-cd3f05544673.png) E o que eu consegui chegar foi só nisso aqui:(https://cdn1.gnarususercontent.com.br/1/1130103/314692fb-9d36-4856-a2ec-d356d4a8d7ff.png) (https://cdn1.gnarususercontent.com.br/1/1130103/355bad92-d148-42ff-8f3c-7eb783fc65ba.png) As imagens não alinham Segue o código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="principal">
        <h1 class="titulo">Título</h1>
        <div class="avaliacao">
            <img src="icones/star-solid.svg" class="estrela" alt="estrela de avaliação">
            <p class="informacao">Informacao</p>
        </div>
        <div class="imagens">
        <img class="img_grande" src="images/imagem_1_grande.jpg" alt="">
        <img class="img_pequena" src="images/imagem_2_pequena.jpg" alt="">
        <img class="img_pequena" src="images/imagem_3_pequena.jpg" alt="">
        <img class="img_pequena" src="images/imagem_4_pequena.jpg" alt="">
        <img class="img_pequena" src="images/imagem_5_pequena.jpg" alt="">
        </div>

        </div>

    </div>
</body>
</html>

* {
    font-family: 'Open Sans', sans-serif;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

.principal {
    padding: 20px;
}

.estrela {
    width: 2%;
}

.avaliacao {
    display: flex;
}

.informacao {
    padding: 5px;
}


.imagens {
    display: flex;
    flex-wrap: wrap;
    border: solid black;
    width: 100%;
    height: 65vh;
    gap: 10px;
    overflow-y: auto;
    padding: 10px;
  }

  .img_grande {
    width: 50%;
    height: 100%;
    border: solid black;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img_pequena {
    width: 20%;
    height: 50%;
    border: solid black;
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0 5px 5px 0;
  }

Tava tentando e só consegui desse jeito, não sei muito bem usar o flex.

* {
    font-family: 'Open Sans', sans-serif;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

.principal {
    border: solid red;

}

.estrela {
    width: 2%;
}

.avaliacao {
    display: flex;
}

.informacao {
    padding: 5px;
}


.imagens {
    display: block;
    flex-wrap: wrap;
    border: solid blue;
    width: 100%;
    height: 65vh;
    gap: 10px;
    overflow-y: auto;
    padding: 10px;
  }

  .img_grande {
    float: left;
    width: 50%;
    height: 100%;
    border: solid black;
    display: inline;
    align-items: center;
    justify-content: center;
  }

  .img_pequena {
    float: right;
    width: 20%;
    height: 50%;
    border: solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px 5px 0;
  }

  .clear {
    clear: both;
  }