@layer components {
  .p {
    @apply break-words;

    &:not(.is-small) {
      @apply md:text-lg xl:text-xl;
    }
  }

  .pre-heading {
    @apply font-bold text-xs md:text-sm break-words hyphens-auto;
  }

  .h1 {
    @apply text-3xl lg:text-4xl xl:text-5xl font-bold;
  }

  .h2 {
    @apply font-bold text-2xl lg:text-3xl xl:text-4xl break-words hyphens-auto print:!text-xl;
  }

  .h3 {
    @apply text-lg lg:text-xl xl:text-2xl font-bold;
  }

  .h4 {
    @apply text-lg lg:text-xl font-bold;
  }

  .lead {
    @apply font-bold text-xl xl:text-2xl;
  }

  .p {
    @apply not-first:mt-20 not-last:mb-20 xl:not-first:mt-25 xl:not-last:mb-25;
  }

  .ol,
  .ul {
    @apply ml-0 not-first:mt-20;

    li {
      @apply marker:text-gray-800 ml-25 mb-20;

      .ul,
      .ol {
        @apply mt-10;
      }
    }
  }

  .is-small {
    .ol,
    .ul {
      li {
        @apply mb-5;
      }
    }
  }

  .ol {
    @apply list-decimal;
    li {
      &:has(ol), &:has(ul) {
        &::marker {
          @apply text-[transparent];
        }
      }
    }
  }

  .ul {
    li {
      @apply list-none;

      &:before {
        @apply float-left ml-[-1em] content-dot;
      }

      &:has(ul), &:has(ol) {
        &:before {
          @apply content-[""];
        }
      }
    }
  }
}