/* ================================================================
   layout.css — container, grids, utilities
   ================================================================ */

.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin-inline: auto;
  padding-inline: var(--container-gap-mobile);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--container-gap-tablet); }
}

@media (min-width: 1025px) {
  .container { padding-inline: var(--container-gap-desktop); }
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}