/* ==========================================================================
   Shared layout primitives
   ========================================================================== */

.container {
  width: min(calc(100% - 64px), var(--layout-container));
  margin-inline: auto;
}

.section {
  padding: 28px 0;
}

.site-main {
  min-height: 60vh;
}

/* ==========================================================================
   Responsive / Media Queries
   ========================================================================== */

@media (max-width: 720px) {
  body .container {
    width: min(calc(100% - 32px), var(--layout-container));
  }

  .section {
    padding: 22px 0;
  }
}