/* Shared gutters and contained artwork across the public school pages. */
@media screen {
  main > .wrap, footer > .wrap { padding-inline: 48px; }
  .hero > *, .split > *, .grade-title-row > *, .idea-footer > * { min-width: 0; }

  .overview .grade-support { padding: 18px 24px; margin-top: 20px; }
  .grade-title-text { flex-basis: 145px; }
  .grade-grid .grade-title-text h3 { white-space: nowrap; }
  .grade-grid .grade-students img {
    width: 100%; height: 100%; margin: 0; border-radius: 0;
    object-fit: contain; object-position: right center;
  }
  .grade-copy p.grade-preparation {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #ffffff24;
    font-size: 13px;
    line-height: 1.7;
  }
  .grade-preparation strong { color: #eab0c5; }
  .teacher-ideas .idea-footer { min-height: 0; gap: 12px; padding-top: 8px; }
  .teacher-ideas .idea-illustration { margin: 0; }
  .photo-viewer { max-width: calc(100vw - 32px); }
  .photo-viewer img { max-width: min(88vw, calc(100vw - 64px)); }

  /* Keep the moving prints in their own stage, including during arrival. */
  .photo-gallery { overflow: clip; padding-top: 48px; }
  .photo-gallery .photo-stack { margin-bottom: 16px; }

  .pricing-page .plan-card .plan-top {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 64px 30px; align-content: start;
  }
  .pricing-page .plan-card .plan-base { grid-row: 3; grid-column: 1; }
  .pricing-page .plan-body {
    grid-template-rows: minmax(50px, auto) auto; gap: 14px;
    align-content: start; padding-top: 20px;
  }
  .pricing-page .plan-unit { align-self: center; }
  .pricing-page .plan-card > .btn { margin-top: 24px; }

  @media (max-width: 1050px) {
    main > .wrap, footer > .wrap { padding-inline: 28px; }
  }
  @media (min-width: 851px) and (max-width: 1100px) {
    .grade-title-text { flex-basis: 145px; }
    .grade-grid .grade-title-text h3 { white-space: nowrap; }
  }
  @media (max-width: 550px) {
    main > .wrap, footer > .wrap, .calendar-page main > .wrap { padding-inline: 20px; }
    .overview .grade-support { padding: 16px 18px; }
    .grade-title-text { flex-basis: 140px; }
    .grade-grid .grade-title-text h3 { font-size: 23px; white-space: nowrap; }
    .photo-gallery { padding-top: 36px; }
    .photo-gallery .photo-stack { height: 330px; }
    .sample-toolbar { flex-wrap: wrap; gap: 12px; }
    .sample-toolbar h3 { max-width: none; flex: 1 1 160px; }
    .sample-navigation { margin-left: auto; flex: 0 0 auto; }
    .sample-navigation button { flex: 0 0 34px; }
    .pricing-page .plan-body { grid-template-rows: auto auto; gap: 18px; }
    .pricing-page .plan-card p.plan-summary { text-align: center; }
  }
}