/* =========================================================
   PROJECTS INDEX / GRID
========================================================= */

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(48px, 6vw, 120px);
  row-gap: var(--space-7);
}

.projects-grid > .project-item {
  width: 100%;
  margin: 0;
}



.project-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-item-image {
  position: relative;
  overflow: hidden;

  aspect-ratio: 16 / 10;
}

.project-item-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}

/* =========================================================
   PROJECTS INDEX / LINKS
========================================================= */

.projects-list .gate-title {
  color: var(--text-dark);
}

.projects-list .gate-title a,
.projects-list .gate-title a:visited {
  color: var(--text-dark);
  text-decoration: none;
}

.projects-list .gate-title a:hover {
  opacity: 0.6;
}

.projects-list .project-summary {
  line-height: 1.5;
}


/* =========================================================
   PROJECTS INDEX / COMPACT
========================================================= */

@media (max-width: 820px),
       (max-aspect-ratio: 4/3) {

  .projects-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }

  .projects-grid .project-item:nth-child(even) {
    transform: none;
  }
}

/* =========================================================
   PROJECTS INDEX / FEATURED ITEM
========================================================= */

@media (min-width: 821px) {

  .project-item--featured {
    grid-column: span 2;

    max-width: 1000px;

    margin-inline: auto;
    margin-bottom: var(--space-6);
  }

  .project-item--featured .project-item-image {
    aspect-ratio: 16 / 8;
  }

  .project-item--featured .project-item-text {
    max-width: 420px;
  }
}

/* =========================================================
   PROJECTS INDEX / ASYMMETRIC PAIR
========================================================= */

@media (min-width: 821px) {

  .project-item--small {
    max-width: 78%;
    justify-self: start;
  }

  .project-item--small .project-item-image {
    aspect-ratio: 4 / 3;
  }

.project-item--large {
  width: min(112%, 620px);

  justify-self: end;
}

  .project-item--large .project-item-image {
  aspect-ratio: 4 / 5;
}
}

/* =========================================================
   PROJECTS INDEX / LIFT
========================================================= */

@media (min-width: 821px) {

  .project-item--lift {
    transform: translateY(-320px);
  }
}

.projects-note {
  margin-top: var(--space-3);

  max-width: 620px;

  font-size: var(--fs-body);
  line-height: 1.7;

  color: var(--text-muted);
  opacity: 0.72;

  font-style: italic;
}