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


    &:focus {
      @apply no-underline;
      outline-color: currentColor;
      outline-offset: 2px;
      outline-style: solid;
    }
  }

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

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

    h2 + * {
      @apply mt-2;
    }

    h2 {
      @apply mt-6;
    }

    blockquote {
      @apply my-8;
    }

    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;
    }

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

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