@import url("/assets/css/portfolio/pr-heroSection.css");
@import url("/assets/css/portfolio/pr-overviewSection.css");
@import url("/assets/css/portfolio/pr-sidebar.css");
@import url("/assets/css/portfolio/pr-caseStudy.css");
@import url("/assets/css/others.css");
@import url("/assets/css/giscus.css");


.project-page {
  color: var(--col-txt-muted)
}
h1, h2, h3, h4, h5, h6 {
  color: var(--col-txt-default);
}

@media (max-width: 950px) {
  .project-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-11);
  }

  .case-study-layout {
    display: block;
    max-width: var(--width-content);
    margin-inline: auto;
  }

  .case-study-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .project-intro {
    font-size: var(--fs-body);
  }

  .overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-item:nth-child(-n + 2) {
    border-bottom: var(--border-def);
  }

  .project-navigation {
    grid-template-columns: 1fr;
    margin-top: var(--space-15);
  }
}

p:has(> img.has-caption)::after {
  content: attr(data-caption);
  display: block;
  text-align: center;
  font-size: var(--fs-label);
  margin-top: var(--space-1);
  font-style: italic;
}

p:has(> img) {
  margin-block: var(--space-6);
  margin-inline: auto;
}