/* Decorative artwork stays in the document flow, beside its editorial context. */
.mascot-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: start;
  column-gap: 24px;
}
.mascot-editorial > .page-mascot {
  grid-column: 2;
  grid-row: 1 / span 20;
  align-self: start;
  margin-top: 24px;
}
.page-mascot {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 680px) {
  .mascot-editorial {
    display: flow-root;
  }
  .mascot-editorial > .page-mascot {
    float: right;
    width: 72px;
    margin: 24px 0 12px 16px;
  }
  .surprise-demo.mascot-editorial > .page-mascot {
    float: none;
    width: 88px;
    margin: 0 auto 12px;
  }
}