.project-views {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.project-views button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--corner-radius);
  background: transparent;
  color: #737478;
  cursor: pointer;
}

.project-views button:is(:hover, :focus-visible, [aria-pressed="true"]) {
  background: rgb(26 26 26 / .08);
  color: var(--ink);
}

.project-timeline {
  position: relative;
  grid-auto-rows: minmax(72px, auto);
  gap: 16px;
  padding-left: calc(var(--header-gap) + 36px);
}

.project-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 24px;
  left: calc(var(--header-gap) + 4px);
  width: 1px;
  background: var(--divider);
}

.timeline-entry {
  position: relative;
  display: grid;
  align-self: start;
  gap: 8px;
}

.timeline-entry::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -36px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: #9a9b9e;
}

.timeline-date {
  color: #737478;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.timeline-year::before {
  top: 9.5px;
  left: -40.5px;
  width: 18px;
  height: 2px;
  border: 0;
  border-radius: 0;
}

.project-list[data-view="gallery"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  padding-left: var(--header-gap);
}

.project-list[data-view="gallery"]::before,
.project-list[data-view="gallery"] .timeline-entry.timeline-year:not(:has(.card)),
.project-list[data-view="gallery"] .timeline-date,
.project-list[data-view="gallery"] .timeline-entry::before {
  display: none;
}

.project-list[data-view="gallery"] .timeline-entry {
  display: contents;
}

.project-list[data-view="gallery"] .card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 180px auto 1fr auto;
  min-height: 320px;
  gap: 8px;
  padding: 0 0 16px;
  overflow: hidden;
}

.project-list[data-view="gallery"] .gallery-image,
.project-list[data-view="gallery"] .card:not(:has(.gallery-image))::before {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 180px;
  background: var(--paper);
}

.project-list[data-view="gallery"] .gallery-image {
  object-fit: cover;
  pointer-events: none;
}

.project-list[data-view="gallery"] .card:not(:has(.gallery-image))::before {
  content: "";
}

.project-list[data-view="gallery"] .card-meta,
.project-list[data-view="gallery"] .card-description,
.project-list[data-view="gallery"] .card-icons {
  grid-column: 1;
  padding: 0 16px;
}

.project-list[data-view="gallery"] .card-meta {
  grid-row: 2;
}

.project-list[data-view="gallery"] .card-description {
  grid-row: 3;
  white-space: normal;
}

.project-list[data-view="gallery"] .card-icons {
  grid-row: 4;
}

@media (max-width: 600px) {
  .index-header:has(.project-views) .index-title {
    margin-left: 8px;
    padding: 0 8px;
  }
}