.mark-index{background:#fff}
.mark-index .project-head{padding-bottom:26px}
.mark-index .project-head h1{margin-bottom:12px}
.mark-index .project-head p{margin:0;color:#555}
.mark-collection{padding-bottom:72px}
.mark-toggle{margin:0 6px 0 0;vertical-align:middle;accent-color:#151515}
.mark-toggle+label{font-size:13px;cursor:pointer}
.mark-grid{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px;padding:0;margin:22px 0 0}
.mark-grid li{min-width:0}
.mark-entry{display:block;min-width:0}
.mark-art{display:grid;place-items:center;aspect-ratio:1;background:#fff;position:relative}
.mark-art img{grid-area:1/1;display:block;width:var(--mark-width);height:auto}
.mark-color{position:absolute;inset:0;display:grid;place-items:center;background:var(--brand-field);opacity:0;transition:opacity .16s ease;pointer-events:none}
.mark-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mark-entry:focus-visible .mark-color,.mark-toggle:checked~.mark-grid .mark-color{opacity:1}
@media(hover:hover){
  .mark-entry:hover .mark-color{opacity:1}
}
@media(max-width:1020px){.mark-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:680px){.mark-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}}
@media(max-width:430px){.mark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.mark-color{transition:none}}