/* Shared page frame
 * Structure: frame -> nav spacer + page gutters -> centered page container.
 * Pages own their background, minimum height, artwork and text alignment.
 */
.serim-hero-frame {
  --serim-hero-title-top: calc(8px + 4.125rem + 60px);
  --serim-hero-label-height: 24px;
  --serim-hero-content-gap: 1rem;
  --serim-hero-nav-space: calc(
    var(--serim-hero-title-top)
    - var(--serim-hero-label-height)
    - var(--serim-hero-content-gap)
  );

  display: flex;
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
}

.serim-nav-spacer {
  flex: 0 0 var(--serim-hero-nav-space);
  height: var(--serim-hero-nav-space);
}

.serim-page-gutters {
  width: 100%;
  padding-inline: 24px;
}

.serim-page-container {
  width: 100%;
  max-width: 81rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .serim-hero-frame {
    --serim-hero-title-top: calc(8px + 7rem + 56px);
  }

  .serim-page-gutters {
    padding-inline: 32px;
  }
}

@media (min-width: 992px) {
  .serim-page-gutters {
    padding-inline: 40px;
  }
}