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

  > * {
    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);
  } */
  &__background {
    @apply absolute inset-0 w-full h-full;
    /* 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;
    }
  }

  &--black-white-cover-filter {
    .narrative-card__cover {
      @apply grayscale;
      filter: grayscale(100%);

      &:hover {
        filter: grayscale(0%);
      }
    }
  }

  &__cover {
    --margin: 1rem;
    @apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;
    aspect-ratio: 1/1;
    max-width: 300px;
    @screen lg {
      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;
    }
  }

  /* Aspect ratio modifiers applied to the cover container */
  &__cover--ratio-1-1 {
    aspect-ratio: 1 / 1;
  }
  &__cover--ratio-4-3 {
    aspect-ratio: 4 / 3;
  }
  &__cover--ratio-3-4 {
    aspect-ratio: 3 / 4;
  }
  &__cover--ratio-3-2 {
    aspect-ratio: 3 / 2;
  }
  &__cover--ratio-2-3 {
    aspect-ratio: 2 / 3;
  }
  &__cover--ratio-16-9 {
    aspect-ratio: 16 / 9;
  }
  &__cover--ratio-21-9 {
    aspect-ratio: 21 / 9;
  }
  &__cover--ratio-9-16 {
    aspect-ratio: 9 / 16;
  }
  &__cover--ratio-9-21 {
    aspect-ratio: 9 / 21;
  }

  &__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;

    @apply text-3xl;
    @screen lg {
      font-size: 2.25rem;
    }
  }
}