/* Keep the reusable mark square within the existing responsive hero slot. */
.hero-art {
  display: grid;
  place-items: center;
}
.hero-art > pios-filament-mark {
  width: min(100%, 560px);
  height: auto;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .hero-art > pios-filament-mark {
    width: min(100%, 354px);
  }
}