:root {
  --asset-hero-desktop: url("./images/hero-desktop.png");
  --asset-hero-mobile: url("./images/hero-mobile.png");
  --asset-ground-tile: url("./textures/ground-tile.png");
}

.hero-asset {
  background-image:
    linear-gradient(90deg, rgba(15, 14, 11, 0.88) 0%, rgba(15, 14, 11, 0.42) 46%, rgba(15, 14, 11, 0.08) 78%),
    linear-gradient(180deg, rgba(8, 8, 7, 0.24), transparent 32%, rgba(8, 8, 7, 0.32)),
    var(--asset-hero-desktop);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.demo-ground-asset {
  background-image:
    linear-gradient(rgba(28, 23, 17, 0.12), rgba(28, 23, 17, 0.12)),
    var(--asset-ground-tile);
  background-position: center;
  background-repeat: repeat;
  background-size: 512px 512px;
  box-shadow: inset 0 0 72px rgba(17, 14, 10, 0.32);
}

.soldier-asset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 720px) {
  .hero-asset {
    background-image:
      linear-gradient(180deg, rgba(15, 14, 11, 0.78) 0%, rgba(15, 14, 11, 0.34) 32%, rgba(15, 14, 11, 0.05) 58%),
      var(--asset-hero-mobile);
    background-position: center;
  }

  .demo-ground-asset {
    background-size: 384px 384px;
  }
}