/* Single project page: sheet, previous / next, other projects (Folio Sync). */
.folio-project-details { margin-block: 2.5rem; padding-block: 1.25rem; border-block: 1px solid currentColor; border-color: rgba(0, 0, 0, .15); font-size: .9em; }
.folio-project-details dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.folio-project-details dt { font-size: .75em; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.folio-project-details dd { margin: .2em 0 0; }
.folio-project-details__credits { margin: 1rem 0 0; font-size: .9em; opacity: .75; }

.folio-project-nav { display: flex; justify-content: space-between; gap: 1rem; margin-block: 2.5rem; }
.folio-project-nav a { display: flex; flex-direction: column; gap: .2em; max-width: 48%; text-decoration: none; }
.folio-project-nav a span { font-size: .75em; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.folio-project-nav__prev span::before { content: "← "; }
.folio-project-nav__next { margin-left: auto; text-align: right; }
.folio-project-nav__next span::after { content: " →"; }

.folio-project-others { margin-block: 3rem 1rem; }
.folio-project-others h2 { font-size: 1.1em; margin: 0 0 1rem; }
.folio-project-others ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.folio-project-others a { display: flex; flex-direction: column; gap: .3em; text-decoration: none; color: inherit; }
.folio-project-others img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity .3s; }
.folio-project-others a:hover img { opacity: .85; }
.folio-project-others span { font-size: .8em; opacity: .6; }