.markdown *:last-child {
  @apply pb-0 mb-0;
}

.markdown *:first-child {
  @apply pt-0 mt-0;
}

.markdown *:first-child figure {
  @apply pt-0 mt-0;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote {
  @apply my-8;
}

/* Default Typography */

.markdown h1 {
  @apply text-4xl font-bold mt-32 mb-16;
}

.markdown h2 {
  @apply text-3xl font-bold mt-24 mb-12;
}

.markdown h3 {
  @apply text-2xl font-semibold mt-16 mb-8;
}

.markdown h4 {
  @apply text-xl font-semibold mt-8 mb-4;
}

.markdown p {
  @apply text-base md:text-lg leading-relaxed;
}

.markdown li {
  @apply py-2 ml-6 text-base md:text-lg;
}

.markdown hr {
  @apply my-16 border-t-2 border-wall-300;
}

.markdown iframe {
  min-height: 512px;
}

/* Technical Typography */

.markdown.technical h1 {
  @apply text-3xl font-bold mt-32 mb-16;
}

.markdown.technical h2 {
  @apply text-2xl font-bold mt-24 mb-12;
}

.markdown.technical h3 {
  @apply text-xl font-semibold mt-16 mb-8;
}

.markdown.technical h4 {
  @apply text-lg font-semibold mt-8 mb-4;
}

.markdown.technical p {
  @apply text-base leading-relaxed;
}

.markdown.technical li {
  @apply py-2 ml-6 text-base;
}

/* Imagery */

.markdown img {
  @apply rounded-lg w-full h-auto;
}

.markdown figure {
  @apply relative my-8 z-0 w-full left-0;
}

@media (min-width: 768px) {
  .markdown figure {
    width: 125%;
    left: -12.5%;
  }
}

.markdown pre,
.markdown pre[class*="language-"] {
  @apply block p-4 bg-wall-100 rounded-lg overflow-x-auto;
}

.markdown code,
.markdown code[class*="language-"] {
  @apply px-2 py-0.5 bg-wall-100 rounded-lg;
}

.markdown a code,
.markdown a code[class*="language-"] {
  @apply bg-green-100 text-green-400;
}

.markdown ul {
  list-style: outside;
  list-style-type: disc;
}

.markdown ol {
  list-style: outside;
  list-style-type: decimal;
}

.markdown li a,
.markdown h3 a,
.markdown h2 a {
  @apply text-green-400;
}

.markdown blockquote {
  @apply border-l-4 border-wall-300 pl-6 italic;
}
.markdown blockquote cite {
  @apply not-italic font-semibold;
}

.markdown table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}

.markdown table tr th,
.markdown table tr td {
  border-right-width: 2px;
  border-right-style: solid;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  padding: 8px !important;
  @apply border-wall-100;
}

.markdown table tr th:first-child,
.markdown table tr td:first-child {
  border-left-width: 2px;
  border-left-style: solid;
  @apply border-wall-100;
}

.markdown table tr th {
  background: rgba(240, 239, 236, 0.33);
  border-top-width: 2px;
  border-top-style: solid;
  text-align: left;
  vertical-align: middle;
  @apply border-wall-100;
}

/* top-left border-radius */
.markdown table tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

/* top-right border-radius */
.markdown table tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

/* bottom-left border-radius */
.markdown table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

/* bottom-right border-radius */
.markdown table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}