.header {
  --header-region-gap: theme(spacing.1);
  --container-max-width: theme('breakpoints.2xl');
  --container-padding: theme(spacing.4);

  @media (min-width: theme('screens.lg')) {
    --header-region-gap: theme(spacing.12);
    --container-padding: theme(spacing.8);
  }
}

.header .region__container {
  @apply gap-x-[var(--header-region-gap)];
}

.page__header:last-of-type {
  @apply shadow;
}
