/* Keep the ST5 image flush with the square cards beside it. */
#selected-work article:has(> a[href="/projects/2021-2024/development/07"]) > a > [aria-hidden="true"] {
  aspect-ratio: 1 / 1 !important;
}
@media (min-width: 1280px) {
  #selected-work article:has(> a[href="/projects/2021-2024/development/07"]) > a > [aria-hidden="true"] {
    aspect-ratio: auto !important;
    height: calc((100vw - 7rem) / 4 - 1rem);
  }
}

/* Match the new image placeholders to the small card above. */
#selected-work article.yota-new-work-card > :is(a, div) > [aria-hidden="true"] {
  aspect-ratio: 1 / 1 !important;
}
@media (min-width: 1024px) {
  #selected-work article.yota-new-work-card {
    grid-row: 5;
  }
}
@media (min-width: 1280px) {
  #selected-work article.yota-new-work-card:nth-last-child(2) {
    grid-column: 4 / span 4;
  }
  #selected-work article.yota-new-work-card > :is(a, div) > [aria-hidden="true"] {
    aspect-ratio: auto !important;
    height: calc((100vw - 7rem) / 4 - 1rem);
  }
}

/* Collection badges match the vivid green site wordmark. */
#selected-work article:has(> a[href="/projects/2021-2024/development/01"]) span.bg-selection,
#selected-work article:has(> a[href="/projects/2021-2024/development/08"]) span.bg-selection {
  background-color: #00ff1a;
}

#selected-work article:has(> a[href="/projects/2021-2024/development/05"]) span.bg-selection,
#selected-work article:has(> a[href="/projects/2021-2024/development/06"]) span.bg-selection,
#selected-work article:has(> a[href="/projects/2021-2024/development/07"]) span.bg-selection {
  background-color: #00ff1a;
}