/* ==========================================================================
   CONTAINER — contenedores y estructura general de página
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main.site-main {
  flex: 1;
  padding-top: var(--header-height);
}

.section {
  padding-block: var(--space-8);
}

.section--tight {
  padding-block: var(--space-6);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }
}