.post-header {
  position: relative;
  margin-bottom: var(--rhythm-xl);
  reading-flow: flex-visual;
}

.post-header .content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--rhythm-md);
}

.post-header .content .top {
  margin-bottom: var(--rhythm-sm);
}

.post-header .content .column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-header .title {
  margin-bottom: 0;
  color: var(--primary-700);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display-sm);
  line-height: var(--font-line-height-display-sm);
  letter-spacing: var(--font-letterspacing-display-sm);
  font-size: var(--font-size-display-sm);
}

.post-header .series-nav {
  margin-bottom: 8px;
}

.post-header .series-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-header .series-nav ul li {
  margin: 0;
}

.post-header .series-nav ul li a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--gray-100);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
  background-color: var(--primary-600);
  padding-left: 6px;
  padding-right: 6px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.post-header .series-nav ul li a .icon {
  width: 16px;
  height: 16px;
}

.post-header .series-nav ul li a[aria-disabled="true"] {
  color: var(--gray-400);
  background-color: var(--gray-600);
  cursor: not-allowed;
}

.post-header .series-nav .series-index-link,
.post-header .series-index-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray-100);
  background-color: var(--primary-700);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
}

.post-header .series-index-link.single {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--gray-100);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
  background-color: var(--primary-600);
  padding-left: 8px;
  padding-right: 8px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--radius-xs);
}

.post-header .series-nav ul li a:has(.icon) {
  font-size: var(--font-size-text-md);
  vertical-align: middle;
}

.post-header .series-nav ul li:first-of-type a:has(.icon) {
  border-top-left-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}

.post-header .series-nav ul li:last-of-type a:has(.icon) {
  border-top-right-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}

.post-header .description {
  margin-bottom: 0;
  font-size: var(--font-size-text-lg);
  font-weight: var(--font-weight-text-lg);
  line-height: var(--font-lineheight-text-lg);
  letter-spacing: var(--font-letterspacing-text-lg);
}

.post-header .date {
  color: var(--gray-700);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
}

.post-header .label {
  display: block;
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
  color: var(--gray-700);
  margin-bottom: 4px;
}

.post-header .series-index-link.single .label {
  color: var(--gray-300);
  margin: 0;
}

.post-header .content ul.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-header .content ul.categories li.category {
  margin: 0;
}

.post-header .content ul.categories li.category a {
  display: block;
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: var(--primary-700);
  color: var(--gray-100);
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
}

.post-header .content ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-header .content ul.tags li {
  margin: 0;
}

.post-header .content ul.tags li.tag a {
  display: block;
  color: var(--primary-900);
  font-size: var(--font-size-text-sm);
  font-weight: var(--font-weight-text-sm);
  line-height: var(--font-lineheight-text-sm);
  letter-spacing: var(--font-letterspacing-text-sm);
}

.post-header .img-cont {
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevation-3);
}

@media (min-width: 37.5em) {
  .post-header .content {
    display: grid;
    grid-template:
      "top top" auto
      "left right" 1fr
      / 6fr 4fr;
    grid-gap: 16px;
    gap: 16px;
  }

  .post-header .content .top {
    grid-area: top;
  }

  .post-header .title {
    font-weight: var(--font-weight-display-md);
    line-height: var(--font-line-height-display-md);
    letter-spacing: var(--font-letterspacing-display-md);
    font-size: var(--font-size-display-md);
  }

  .post-header .content .column.left {
    grid-area: left;
    justify-content: end;
  }

  .post-header .content .column.right {
    grid-area: right;
    align-items: end;
    justify-content: end;
    text-align: right;
  }

  .post-header .content ul.categories,
  .post-header .content ul.tags {
    justify-content: end;
  }
}

@media (min-width: 62.5em) {
  .post-header {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--rhythm-md);
  }

  .post-header .img-cont {
    flex: 0 1 50%;
  }

  .post-header .content {
    flex: 1 0 50%;
    margin: 0;
  }

  .post-header .content .top {
    margin-bottom: 0;
  }

  .post-header .title {
    font-size: calc(var(--font-size-display-md) - 1.25rem);
  }
}

@media (min-width: 75em) {
  .post-header {
    gap: var(--rhythm-xl);
  }

  .post-header .title {
    font-size: var(--font-size-display-md);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .post-header .img-cont {
    translate: -100vw;
    animation: slideInFromLeft var(--transition-spring-lg) forwards;
    animation-delay: 0.3s;
  }

  .post-header .content {
    translate: 100vw;
    animation: slideInFromRight var(--transition-spring-lg) forwards;
    animation-delay: 0.1s;
  }
}

@keyframes slideInFromLeft {
  0% {
    translate: -100vw;
    opacity: 0;
  }

  100% {
    translate: 0;
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    translate: 100vw;
    opacity: 0;
  }

  100% {
    translate: 0;
    opacity: 1;
  }
}
.blog-post {
  width: 100%;
  max-width: var(--editorial-max-width-with-gutter);
  margin: var(--rhythm-md) auto;
}