@layer components {
  .c-richText {
    &:first-child {
      @apply mt-0 pt-0;
    }

    .text-large {
      @apply text-lg;
    }

    a {
      @apply font-bold text-primary-600 underline transition;

      &:hover {
        @apply text-primary-500 no-underline;
      }
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
      @apply pt-2 font-bold md:pt-4 !-mb-3 md:!-mb-6;
    }

    h2 {
      @apply text-xl;
    }

    h3 {
      @apply text-lg;
    }

    h4,
    h5,
    h6 {
      @apply text-base;
    }

    ul li,
    ol li {
      @apply relative pl-3 md:pl-6;
    }

    ul li::before {
      content: '';

      @apply absolute left-0 top-3 h-1 w-1 rounded bg-current;
    }

    ol {
      @apply list-inside list-decimal;
    }

    ul li ul,
    ol li ol {
      @apply mt-1  md:mt-2;
    }

    .link {
      @apply mr-4 inline-flex grid-flow-col items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 py-1.5 text-center font-sans font-bold no-underline transition text-base;
      @apply mt-4 md:mt-8 !important;
    }

    .link + .link {
      @apply mt-4 md:mt-8 !important;
    }

    .link--primary {
      @apply border-2 border-primary-800 bg-primary-800 text-white hover:border-primary-700 hover:bg-primary-700 hover:text-white;
    }

    .link--secondary {
      @apply border-2 border-secondary-300 bg-secondary-300 text-secondary-800 hover:border-secondary-400 hover:bg-secondary-400 hover:text-secondary-800;
    }
  }
}
