.markup-h1 {
    @apply font-title;
    @apply font-semibold;
    @apply text-xl;
    @apply md:text-3.5xl;
}

.markup-h2 {
    @apply font-title;
    @apply font-semibold;
    @apply text-xl;
    @apply md:text-2xl;
    @apply mb-10;
}

.markup-h3 {
    @apply font-bold;
    @apply leading-tight;
    @apply text-lg;
    @apply md:text-2xl;
}

.markup-h4 {
    @apply font-semibold;
    @apply leading-tight;
    @apply text-xs;
    @apply uppercase;
    @apply tracking-widest;
}

.markup h1 {
    @apply font-title;
    @apply font-semibold;
    @apply text-xl;
    @apply md:text-3.5xl;
    @apply mb-8;
}

.markup h2 {
    @apply font-title;
    @apply font-semibold;
    @apply text-xl;
    @apply md:text-2xl;
    @apply mb-10;
    @apply mb-4;
}

.markup h2:not(:first-child) {
    @apply mt-12;
}

.markup h3 {
    @apply font-bold;
    @apply leading-tight;
    @apply text-lg;
    @apply md:text-2xl;
    @apply mb-4;
}

.markup h3:not(:first-child) {
    @apply mt-12;
}

.markup h4 {
    @apply font-semibold;
    @apply leading-tight;
    @apply text-xs;
    @apply uppercase;
    @apply tracking-widest;
    @apply mb-2;
}

.markup h4:not(:first-child) {
    @apply mt-6;
}

.markup p,
.markup ul,
.markup ol {
    @apply mb-4;
    @apply last:mb-0;
}

.markup strong {
    @apply font-semibold;
}

.markup-ol,
.markup-lists ol {
    list-style: decimal;
    @apply pl-10;
}

.markup-ul,
.markup-lists ul {
    @apply pl-4;
}

.markup-ul li:before,
.markup-lists ul li:before {
    @apply absolute;
    @apply left-0;
    @apply -ml-4;
    @apply text-gray-600;
    content: '•';
}

.markup-ul ul,
.markup-lists ul ul {
    @apply pl-5;
}

.markup-ul ul li:before,
.markup-lists ul ul li:before {
    @apply text-gray-400;
}

.markup-links a {
    @apply text-blue-dark!;
    @apply underline;
    text-underline-offset: 2px;
}

.markup-links a:hover {
    @apply text-blue;
}

code.markup-code,
.markup-code code {
    @apply inline-block;
    @apply px-1;
    @apply py-px;
    @apply bg-white;
    @apply rounded-xs;
    @apply text-navy;
    font-size: inherit;
    word-break: break-all;
}

.markup-code pre code,
code.markup-code-block,
.markup-code-block code {
    @apply bg-transparent;
    @apply text-sm;
    @apply block;
    @apply text-gray-200;
    @apply overflow-x-auto;
}

.markup-code pre,
.markup-code-block > code {
    @apply py-4;
    @apply px-6;
    @apply rounded-md;
    @apply text-sm;
}

.markup-code code {
    @apply text-sm;
}

.markup-code pre:last-child code,
code.markup-code-block:last-child,
.markup-code-block:last-child code {
    @apply mb-0;
}

.markup-dl {
    @apply grid;
    @apply gap-x-4;
    @apply gap-y-3;
    @apply md:grid-cols-[auto_1fr];
}

.markup-dl dd {
    @apply -mt-2;
    @apply md:mt-0;
}