.h1 {
  @apply font-sans font-bold text-4xl;
}

.h2 {
  @apply font-sans font-bold text-3xl;
}

.h3 {
  @apply font-sans font-semibold text-2xl;
}

.h4 {
  @apply font-sans font-semibold text-xl;
}

.h5 {
  @apply font-sans font-semibold text-lg;
}

.h6 {
  @apply font-sans font-semibold text-md;
}

.decorator {
  @apply relative after:absolute after:content-[''] after:h-1 after:w-10 after:top-[calc(100%+0.25rem)] after:left-0 after:bg-tertiary after:rounded-b;
}

.title-decorator {
  @apply h2 md:h1 decorator;
}

.text-with-links {
  a {
    @apply underline text-secondary font-semibold;
  }
}

/* default styles for those dynamic text blocks */
.editor-content {
  @apply prose max-w-full text-gray-2 text-lg prose-a:text-secondary break-words prose-ul:pl-4;

  iframe {
    @apply w-full block max-w-[600px] max-h-[70vh] h-[450px] my-10 mx-auto;
  }

  p {
    @apply my-0;
  }

  /* The editor-library adds an empty <p>. */
  /* stylelint-disable selector-pseudo-class-no-unknown */
  p:not(:empty) + p,
  :where(h2, h3, h4, h5, h6) + span {
    @apply my-5;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply mt-0;
  }

  p:not(:empty) + h2 {
    @apply mt-8;
  }

  p:not(:empty) + h3 {
    @apply mt-6;
  }

  p:not(:empty) + h4 {
    @apply mt-4;
  }

  p:not(:empty) + h5,
  p:not(:empty) + h6 {
    @apply mt-2;
  }

  :where(h2, h3, h4, h5, h6) br {
    @apply hidden;
  }
}
