Minha resolução do desafio - de forma responsiva

No início do desafio eu tinha feito as mudanças básicas para atender o objetivo pedido. Na minha segunda tela (um monitor maior que o do meu notebook) tinha ficado tudo ok, mas ao testar na tela do meu notebook, tinha partes desproporcionais, desalinhado e saindo da seção.

Depois de muito inspecionar e testar, resolvi transformar algumas medidas em responsivas e algumas classes atribui o display flex.

No arquivo de estilos modifiquei .obra-titulo retirando o width que ela tinha posto e .quadros__container transformei as medidas de números fixos em medidas responsivas para que tudo se adaptasse:

/*  COMO ESTAVA ANTES:
.quadros__container {
  width: 1650px;
  position: absolute;
  left: 176px;
  top: 150px;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
} */
.quadros__container {
  width: 80vw;
  position: absolute;
  left: 10vw;
  top: 15vh;
  background: #525c63d8;
  padding: 10px;
  border-radius: 10px;
}


.obra-titulo {
  border: 1px dotted white;
  padding: 10px;
  user-select: none;
  text-align: center;
  /* width: 275px;    A MEDIDA RETIRADA*/
}

Com isso, montei meu flexbox.css onde ajeitei o container principal para ficar na horizontal, transformei a "caixa" da parte da imagem para que fosse flex e assim pudesse alinhar verticalmente o texto e a imagem e por último ajeitei as medidas da imagem para ficarem responsivas :

.quadros__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.figure-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quadro-imagem {
    width: 12vw;
    height: auto;
    display: flex;
}