/* article header */

main .article-header-container > div {
  max-width: unset;
  padding: 0;
  margin: 0 auto;
}

main .section-wrapper .article-header {
  visibility: unset;
  max-width: unset;
}

@media (min-width: 700px) {
  main .article-header {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

main .article-header .article-category,
main .article-header .article-title,
main .article-feature-image .caption {
  margin-left: 32px;
  margin-right: 32px;
}

@media (min-width: 700px) {
  main .article-header .article-category,
  main .article-header .article-title,
  main .article-header .article-byline {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

main .article-header .article-category p,
main .article-header .article-category a {
  margin: 0;
  margin-bottom: 16px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-weight: var(--detail-font-weight);
  color: var(--detail-color);
  font-size: var(--detail-font-size-s);
  line-height: var(--detail-line-height);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .1em;
  
}

@media (min-width: 700px) {
  main .article-header .article-category p,
  main .article-header .article-category a {
    padding: 0;
  }
}

main .article-title h1 {
  color: var(--color-gray-800);
  font-size: var(--heading-font-size-s);
  margin: 0;
  margin-top: 16px;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 480px) {
  main .article-title h1 {
    font-size: var(--heading-font-size-m);
  }
}

@media (min-width: 700px) {
  main .article-title h1 {
    font-size: var(--heading-font-size-l);
    padding: 0;
  }
}

@media (min-width: 1200px) {
  main .article-title h1 {
    font-size: var(--heading-font-size-xl);
  }
}

main .article-byline {
  display: flex;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0 2rem;
}

main .article-byline .article-author-image,
main .article-byline .article-author-image img {
  margin: 0;
  margin-right: 16px;
  height: 64px;
  width: 64px;
  border-radius: 50%;
  object-fit: cover;
}

main .article-byline .article-byline-info {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main .article-byline p {
  margin: 0;
  padding: 0;
  font-size: var(--detail-font-size-m);
  line-height: var(--detail-line-height);
}

main .article-author p,
main .article-author a {
  font-weight: 600;
  text-decoration: none;
}

main .article-date {
  font-weight: 300;
}

/* feature img */

main .article-header .article-feature-image {
  padding: 0;
  margin: auto;
  width: 100%;
  max-width: 1000px;
}

main .article-feature-image .figure-feature {
  margin: 0;
}

main .article-feature-image .figure-feature img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
}