@font-face {
  font-family: 'More Projects Satoshi';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'More Projects Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.more-projects {
  --font-satoshi: 'More Projects Satoshi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-gambarino: 'Gambarino', serif;
  --black: #000100;
  --gray-body-secondary: #6b6b6b;
  --divider: #cdcdcd;
  --placeholder-bg: #ececec;
  --gap-minor: 40px;
  width: var(--wide-w);
  margin-left: var(--wide-x);
  border-top: .4px solid var(--divider);
  padding-top: var(--gap-minor);
}
.more-projects :where(h2, h3, p) { margin: 0; }
.more-projects-heading {
  font: 400 24px/1.631 var(--font-gambarino);
  color: var(--black);
}
.more-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-minor);
  margin-top: var(--gap-minor);
}
.more-project-card {
  display: block;
  min-width: 0;
  color: var(--black);
  text-decoration: none;
}
.more-project-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1.85;
  object-fit: cover;
  background: var(--placeholder-bg);
}
.more-project-cover--bao { object-position: 60% 50%; }
.more-project-title {
  margin-top: 12px;
  font: 400 18px/1.631 var(--font-satoshi);
}
.more-project-description {
  margin-top: 8px;
  min-height: 2.8em;
  font: 300 14px/1.4 var(--font-satoshi);
  color: var(--gray-body-secondary);
  opacity: 1;
  transition: opacity 180ms ease;
}
.more-project-card:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .more-project-description { opacity: 0; }
  .more-project-card:is(:hover, :focus-visible) .more-project-description { opacity: 1; }
}
@media (min-width: 1080px) {
  .more-project-copy {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
    align-items: first baseline;
    margin-top: 12px;
  }
  .more-project-title { margin-top: 0; }
  .more-project-description { margin-top: 0; text-align: right; }
}
@media (max-width: 600px) {
  .more-projects-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .more-project-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 16px;
    align-items: end;
  }
  .more-project-cover { aspect-ratio: 4 / 3; }
  .more-project-copy { min-width: 0; transform: translateY(var(--copy-bottom-offset, 0px)); }
  .more-project-title { margin-top: 0; }
  .more-project-description { margin-top: 4px; min-height: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .more-project-description { transition: none; }
}