.narrative {
  background: var(--paper);
}

.narrative__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.narrative__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("../../img/narrative-texture.webp");
  background-repeat: repeat;
  background-size: 1024px 1024px;
  background-position: top left;
}

.story-row {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: stretch;
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
}

.story-row > * {
  min-width: 0;
  width: 100%;
}

@media (min-width: 48rem) {
  .story-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    max-width: 62rem;
  }

  .story-row > * {
    align-self: center;
  }

  .callout {
    padding: 0;
  }

  .callout__body {
    padding: 3rem;
  }

  .callout__layout {
    flex-direction: row;
    gap: 3rem;
  }

  .callout__content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .callout__art {
    width: 50%;
  }

  .narrative__inner {
    gap: 6rem;
  }
}

@media (min-width: 64rem) {
  .art-frame--landscape {
    height: 20rem;
  }
}

@media (max-width: 47.999rem) {
  .story-row--mobile-reverse {
    flex-direction: column-reverse;
  }

  .narrative .art-frame {
    margin-inline: auto;
  }

  .narrative .art-frame--family {
    max-width: 34rem;
  }

  .narrative .art-frame--square {
    max-width: 28rem;
  }

  .narrative .art-frame--landscape {
    width: min(100%, 26rem);
  }

  .callout__content {
    width: 100%;
  }
}