.narrative-card {
  @apply p-12 py-24 mx-auto max-w-screen-lg;

  > * {
    position: relative;
    z-index: 1;
  }
  &:after {
    content: '';
    background-image: url('../resources/img/skew-background.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    @apply absolute inset-0;
    transform: scaleX(-1);
  }

  .narrative-card__cover {
    @apply rotate-3;
  }

  &--even,
  &:nth-of-type(even) {
    &:after {
      transform: scaleX(1);
    }
    .narrative-card__cover {
      @apply rotate-[-3deg];
    }
  }

  &--has-cover {
    @apply grid lg:grid-cols-2 gap-12 lg:gap-24 gap-y-8 items-center;
    grid-template-columns: 1fr;
    @screen lg {
      grid-template-columns: 3.5fr 1fr;
    }

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

  &__cover {
    --margin: 1rem;
    @apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;
    aspect-ratio: 1/1;

    img {
      @apply w-full h-full object-cover;
      width: calc(100% - var(--margin));
      height: calc(100% - var(--margin));
      object-position: center;
    }
  }

  &__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.25rem;
  }
}