body {
  background: var(--surface-2);
}
.page-projects {
  display: grid;
  margin: 2rem auto;
  grid-template-columns: 30ch auto;
  grid-gap: 1rem;
  gap: 1rem;
}
.page-projects  > h1 {
    grid-column: span 2;
    padding: 1rem;
  }
.page-projects nav {
    position: sticky;
    top: 100px;
    height: 100vh;
    padding: 1rem;
    font-size: 1.2em;
  }
.page-projects .all-projects {
    padding: 1rem;
  }
.page-projects .project-categories {
    display: grid;
    grid-gap: 0.5em;
    gap: 0.5em;
    justify-content: start;
    padding: 1rem;
  }
.page-projects .project-categories li {
      font-weight: 600;
      margin-bottom: 1rem;
    }
.page-projects .project-categories li a {
        font-weight: 400;
        margin-bottom: 0.5rem;
      }
.page-projects h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    grid-column: 2;
  }
.page-projects .projects {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fill, minmax(60ch, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
  }
.page-projects .projects .project-item {
      display: grid;
      grid-template-columns: auto auto;
      grid-gap: 1rem;
      gap: 1rem;
      padding: 1rem;
      container-type: inline-size;
      border: 1px solid #e9ecef;
      border: 1px solid var(--border-color, #e9ecef);
      background: var(--surface-1);
    }
.page-projects .projects .project-item .logo {
        width: 40cqi;
        height: auto;
        -o-object-fit: cover;
           object-fit: cover;
      }
.page-projects .projects .project-item .content h2 {
          font-size: 1.5rem;
          font-weight: 600;
          margin-bottom: 1rem;
        }
.page-projects .projects .project-item .content .summary {
          font-size: 1.25rem;
          font-weight: 400;
          margin-bottom: 1rem;
        }
.page-projects .projects .project-item .content p {
          font-size: 1.25rem;
          font-weight: 400;
          margin-bottom: 1rem;
        }
.page-projects .projects .project-item .links {
        grid-column: span 2;
        display: flex;
        gap: 1rem;
        justify-content: end;
      }
.page-projects .projects .project-item .links a {
          font-size: 1em;
          font-weight: 400;
          margin-bottom: 0.5rem;
          color: #007bff;
          color: var(--primary-color, #007bff);
        }
.page-projects .projects .project-item .links a:hover {
            -webkit-text-decoration: underline;
            text-decoration: underline;
          }
@media screen and (max-width: 120ch) {
  .page-projects {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
    .page-projects nav {
      display: none;
    }
}