[Projeto] Resolucao de exercicios

A minha pagina sobre mim na verdade é uma página onde coloquei as flores da floricultura:
** 1**
css

/*MAIN de Flores*/
.apresentacao__flores{
  flex-direction: row;
  padding: 0% 20% 0% 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

figcaption{
  margin-bottom: 20px;
}

html

  <main class="apresentacao__flores">
    <section>

    </section>
    <figure>
      <img src="./assets/FloresLotusFrame.png" alt="flores de lótus" style="width: 200px; height: auto;">
      <figcaption> flor de lótus</figcaption>
      <img src="./assets/OrquideaFrame.png" alt="orquidea" style="width: 200px; height: auto;">
      <figcaption> orquídea</figcaption>
      <img src="./assets/CerejeiraFrame.png" alt="flores de cerejeira" style="width: 200px; height: auto;">
      <figcaption> flores de cerejeira</figcaption>
    </figure>
  </main>

2 Aqui só coloquei o titulo de apresentacao da pagina, pois o conteudo seguinte sao somente as imagens das flores e a caption das figuras em baixo

 <main class="apresentacao__flores">
    <section class="apresentacao__flores__conteudo">
      <h1 class="apresentacao__especialidades__titulo">Nos belles <strong class="titulo-blog">floris</strong>
      </h1>

    </section>

3 Minhas variaveis de cores e fontes

:root{

  --bege-fundo:#E8E3D5;
  --bege-hover: #e2ddd1;
  --bege-creme: rgba(241, 241, 241, 0.4);
  --marrom-destaque-texto:#51433e;
  --marrom-texto:#6A5952;
  --marrom-link: #95847d;
  --verde-titulo: #8fac78;
  --verde-botao: #abc595;
  --verde-botao-hover: #b6cba3;

  --fonte-titulo:"Fleur De Leah", cursive;
  --fonte-titulo--destaque:'Times New Roman', Times, serif;
  --fonte-paragrafo:"Montserrat",sans-serif;

}

4 e 5 Todas estao aplicadas, mas ultrapassa o limite de caracteres eu colocar aqui no post do forum entao vou colocar só um trecho

/*MAIN do index*/
.apresentacao{
  padding: 0% 15% 1% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apresentacao__conteudo{
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 615px;
}

.apresentacao__conteudo__titulo{
  font-size: 38px;
  font-family: var(--fonte-titulo);
  font-weight: 400;
}

.apresentacao__conteudo__paragrafo{
  font-size: 13px;
  font-family: var(--fonte-paragrafo);
}

/*div*/
.apresentacao__botoes{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 10px;
}

.apresentacao__botoes__subtitulo{
  font-size: 38px;
  font-family:var(--fonte-titulo);
  font-weight: 400;
}

.apresentacao__botoes__link{
  display: flex;
  justify-content: center;
  gap: 8px;
  background-color: var(--verde-botao);
  width:150px;
  text-align: center;
  color:var(--marrom-texto);
  font-size: 14px;
  border-radius: 6px;
  padding:10px 10px;
  list-style: none;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--fonte-paragrafo);
  transition: color 0.3s ease;
}

.apresentacao__botoes__link:hover{
  cursor: pointer;
  background-color: var(--verde-botao-hover);
}