@layer components {
  .link {
    @apply inline-block underline text-blue-primary hover:text-blue-900 dark:text-blue-400 dark:hover:text-white;
    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;
    }

    h3 {
      @apply mt-8 font-bold;
    }

    h2 + h3 {
      @apply mt-2
    }

    blockquote {
      @apply my-8;
    }

    ol {
      @apply pl-6 list-decimal;
    }

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

    li {
      @apply mt-1 first:mt-0;
    }

    a {
      @apply link;
    }

    pre {
      @apply my-8;
    }

    pre code {
      @apply block;
    }

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

    .speakerdeck-embed-wrapper,
    .video-full {
      @apply my-8 aspect-w-4 aspect-h-3;
    }
  }

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