.page-grid {
  --page-pad: 30px;
  --gap: 12px;
  position: relative;
  z-index: 2;
  padding: var(--page-pad);
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 2.08fr 1fr;
  grid-template-rows: 300px 48px minmax(0, 1fr) 280px 70px;
  gap: var(--gap);
  grid-template-areas:
    "header header header"
    "issue issue issue"
    "right center left"
    "bottom-right bottom-center bottom-left"
    "footer footer footer";
}

.section-01 { grid-area: header; }
.section-02 { grid-area: issue; }
.section-03 { grid-area: right; }
.section-04 { grid-area: center; }
.section-05 { grid-area: left; }
.section-06 { grid-area: bottom-right; }
.section-07 { grid-area: bottom-center; }
.section-08 { grid-area: bottom-left; }
.section-09 { grid-area: footer; }

.section {
  min-width: 0;
  min-height: 0;
}

.section-03,
.section-04,
.section-05,
.section-06,
.section-07,
.section-08,
.section-09,
.newspaper-card,
.footer-bar,
.issue-strip,
.masthead {
  height: 100%;
}

.side-card { padding: 22px 18px 18px; }
.main-card { padding: 26px 24px 18px; }
.bottom-card { padding: 18px 18px 16px; }

@media (max-width: 900px) {
  body { padding: 14px; }
  .a3-page { width: 100%; aspect-ratio: auto; min-height: 100vh; }
  .page-grid {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "issue"
      "center"
      "right"
      "left"
      "bottom-right"
      "bottom-center"
      "bottom-left"
      "footer";
  }
  .section-03,
  .section-04,
  .section-05,
  .section-06,
  .section-07,
  .section-08,
  .section-09,
  .newspaper-card,
  .footer-bar,
  .issue-strip,
  .masthead {
    height: auto;
  }
  .newspaper-card { min-height: 360px; }
}