.narrative-card {
  @apply bg-white border border-primary p-12 mx-auto max-w-screen-lg;

  &--has-cover {
    @apply grid grid-cols-2 gap-32 items-center;
    grid-template-columns: 4fr 1fr;

    &--left {
      grid-template-columns: 1fr 4fr;
    }
  }

  &__cover {
    @apply w-full h-auto object-cover border border-primary mx-auto;
    aspect-ratio: 1/1;
  }

  &:nth-child(odd) {
    .narrative-card__cover {
      @apply rotate-3;
    }
  }
  &:nth-child(even) {
    .narrative-card__cover {
      @apply rotate-[-3deg];
    }
  }

  &__content {
    p {
      @apply text-primary text-lg;
    }
  }
  .narrative-card__content h1,
  .narrative-card__content h2,
  .narrative-card__content h3,
  .narrative-card__content h4,
  .narrative-card__content h5,
  .narrative-card__content h6 {
    @apply text-primary uppercase;

    font-size: 2.5rem;
  }
}