@layer components {
  .link {
    @apply text-blue-800 dark:text-blue-400;
    @apply text-decoration-blue-800 dark:text-decoration-blue-400;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1em;
  }

  .markdown {
    > * + * {
      @apply mt-4;
    }

    > *:first-child {
      @apply mt-0;
    }

    h2 + * {
      @apply mt-2;
    }

    h2 {
      @apply mt-6;
    }

    ul {
      @apply pl-6 list-disc;
    }

    li {
      @apply mt-0;
    }

    a {
      @apply link;
    }

    code {
      @apply inline-block;
    }

    pre {
      @apply my-8;
    }

    .media--type-image {
      @apply my-8;
    }
  }

  .visually-hidden {
    @apply sr-only;
  }
}