/* Artwork is intentionally a little warmer and more tactile than the UI. */
.photo-avatar { position: relative; overflow: hidden; }
.photo-avatar > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-art.imagery-hero { height: 460px; background: #f8f7f3; border-radius: 28px; }
.imagery-hero::before { content: none; }
.hero-artwork { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: inherit; }
.hero-artwork > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imagery-hero .float-card { z-index: 1; box-shadow: 0 10px 28px #14233b0c; }
.imagery-hero .float-card.one { inset-block-start: 20px; inset-inline-start: -16px; }
.imagery-hero .float-card.two { inset-block-end: 28px; inset-inline-end: -16px; }
.imagery-hero .float-card.three { inset-block-end: -22px; inset-inline-start: 24px; }
.cover.imagery-card-cover { background: #f8f7f3; }
.cover.imagery-card-cover::before, .cover.imagery-card-cover::after { content: none; }
.imagery-card-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.imagery-card-cover:hover > img { transform: scale(1.035); }
.empty > .imagery-empty { display: block; width: 136px; height: 136px; margin: 0 auto 20px; border-radius: 28px; }
.table-panel .empty > .imagery-empty, .table-wrap + .empty > .imagery-empty { width: 96px; height: 96px; }
.imagery-banner { overflow: hidden; }
.imagery-banner > img { width: 144px; height: 112px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.imagery-banner > div { flex: 1; }
@media (max-width: 1100px) {
  .hero-art.imagery-hero { height: 400px; }
  .imagery-hero .float-card { padding: 12px; }
}
@media (max-width: 640px) {
  .hero-art.imagery-hero { height: 340px; margin: 8px 0 20px; border-radius: 20px; }
  .imagery-hero .float-card.one { inset-inline-start: 8px; inset-block-start: 12px; }
  .imagery-hero .float-card.two { inset-inline-end: 8px; inset-block-end: 32px; }
  .imagery-hero .float-card.three { inset-inline-start: 12px; inset-block-end: -18px; }
  .imagery-banner > img { width: 100%; height: 150px; object-position: center 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .imagery-card-cover > img { transition: none; }
  .imagery-card-cover:hover > img { transform: none; }
}