/* Dataset wall and walking grid. */
.g5 { grid-template-columns: repeat(4,minmax(0,1fr)); }

/* Labels sit beneath the footage; the moving image gets the space. */
.emb-tile { margin: 0; gap: 8px; align-content: start; outline: none; }
.emb-tile .media { aspect-ratio: 4/3; }
.emb-tile > figcaption { color: var(--sub); font-size: 13px; line-height: 1.4; }
.emb-task { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 10px; background: linear-gradient(transparent 10%,#08090aee); color: #eceef1; font-size: 12.5px; line-height: 1.5; opacity: 0; transition: opacity .2s; pointer-events: none; }
.emb-tile:hover .emb-task, .emb-tile:focus .emb-task { opacity: 1; }
.emb-tile:focus-visible .media { outline: 2px solid var(--green); outline-offset: 2px; }
.emb-tile > figcaption { text-align: left; }
.text-toggle { justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 18px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--pill-bg); color: var(--head); font: 500 13.5px/1.3 var(--sans); }
.text-toggle:hover { border-color: var(--g2); }

@media (max-width: 1000px) and (min-width: 641px) { .g5 { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 640px) {
  .g5 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 8px; }
  .emb-tile > figcaption { font-size: 12px; }
  .emb-task { padding: 8px; font-size: 11px; }
}
@media (hover: none) { .emb-task { transition: none; } }
.mx .emb-task { padding-bottom: 44px; }