/* Shared page geometry. Component internals must not be added here. */
.shell {
  width: min(
    var(--container-max),
    calc(100% - (var(--container-gutter) * 2))
  );
  margin-inline: auto;
}

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

@media (max-width: 900px) {
  .section {
    padding-block: var(--section-space-tablet);
  }
}

@media (max-width: 560px) {
  .shell {
    width: min(
      var(--container-max),
      calc(100% - (var(--container-gutter-mobile) * 2))
    );
  }

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