/* layout.css */

.section-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 80rem; /* 1280px max-w-7xl */
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .section-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .section-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

main {
  position: relative;
  z-index: 10;
}

section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}
@media (min-width: 640px) {
  section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* Flex & Grid layouts will be handled via utilities.css for generic grids */