📄 Documentação: Layout Responsivo com Flexbox

🎯 Objetivo

Este conjunto de classes CSS define um layout responsivo em linha (row) usando Flexbox, ideal para organizar blocos de conteúdo lado a lado, com quebra automática em telas menores.


📁 Estrutura das Classes

.container-fluid

.container-fluid {
  width: 100%;
  padding: 4rem 2rem;
}

.flex-row

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.flex-item

.flex-item {
  flex: 1 1 45%;
  background-color: var(--color-bg-secondary);
  padding: 2rem;
  border-radius: 8px;
}

🧱 Exemplo de Uso no HTML

<section class="container-fluid">
  <div class="flex-row">
    <div class="flex-item">
      <h2>História</h2>
      <p>Resumo da Era dos Ancestrais...</p>
    </div>
    <div class="flex-item">
      <h2>Bosses</h2>
      <p>Detalhes sobre Gwyn, Nito e outros...</p>
    </div>
  </div>
</section>

📱 Responsividade