.hero-mark {
  position: relative;
  width: 100%;
  height: 460px;
  max-width: 520px;
  margin: 0 0 24px;
  justify-self: end;
  border: 0;
  background: transparent;
  transform: none;
}
.hero-mark .logo-flat {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  transform: translate(0, 0) rotate(0deg) scale(1);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-mark.is-hovered .logo-flat { will-change: transform; }
@media(max-width:1000px) { .hero-mark { height: 370px; margin: 0; } }
@media(max-width:700px) { .hero-mark { height: 320px; max-width: 370px; margin: 5px auto 25px; } }
@media(prefers-reduced-motion:reduce) { .hero-mark .logo-flat { transform: none !important; } }