/* ==========================================================================
   Layout: contenedor y secciones
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    position: relative;
    padding-block: 80px;
  }

  @media (min-width: 810px) {
    .section {
      padding-block: 100px;
    }
  }

  @media (min-width: 1440px) {
    .section {
      padding-block: 120px;
    }
  }

  .site-main {
    display: block;
  }
}