/* Full-width backgrounds for the redesigned chapters; keep later chapters' gutters. */
.chapters {
  --chapter-gutter: 7.2%;
  --chapter-side: calc(var(--chapter-gutter) + max(0px, (100% - 1400px) / 2));
  display: grid;
  grid-template-columns:
    [full-start] var(--chapter-side)
    [content-start] minmax(0, 1fr)
    [content-end] var(--chapter-side) [full-end];
  max-width: none;
  padding: 0;
}

.chapters > .chapter {
  grid-column: content-start / content-end;
  min-width: 0;
}

#chapter-2.cake-chapter,
#chapter-3.royal-chapter,
#chapter-4.music-chapter {
  grid-column: full-start / full-end;
  width: 100%;
  max-width: none;
  margin-block: 0;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

#chapter-2 .cake-stage {
  max-width: 1200px;
  margin-inline: auto;
}

#chapter-3 .royal-court {
  height: auto;
  aspect-ratio: .8;
}

#chapter-4 .music-visual {
  height: auto;
  aspect-ratio: 1.1;
}

@media (min-width: 901px) and (max-width: 1150px) {
  #chapter-3 .royal-court { aspect-ratio: .74; }
  #chapter-4 .music-visual { aspect-ratio: .92; }
}

@media (min-width: 481px) and (max-width: 900px) {
  #chapter-3 .royal-court { height: 470px; }
  #chapter-4 .music-visual { aspect-ratio: 1.15; }
}

@media (max-width: 760px) {
  .chapters { --chapter-gutter: 6%; }
}

@media (max-width: 480px) {
  #chapter-3 .royal-court {
    height: auto;
    aspect-ratio: .94;
  }
  #chapter-4 .music-visual {
    height: auto;
    aspect-ratio: 1.2;
  }
}