body {
  margin: 0;
  font-family: Tahoma, sans-serif;
  background: url('greensmoke.jpg') center / cover no-repeat fixed;
  display: flex;
  justify-content: center;
}

/* Stage container */
.page-wrapper {
  position: relative;
  width: 1200px;           /* base design width */
  height: 800px;           /* base design height */
  transform-origin: top center;
}

/* Scale proportionally with screen width */
@media (max-width: 1600px) {
  .page-wrapper {
    transform: scale(calc(100vw / 1200));
  }
}

/* Hero */
.hero-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 320px;
}

/* Smoke (aligned to cig tip) */
.smoke {
  position: absolute;
  left: 240px;  /* adjust until it's perfect */
  bottom: 180px;
  width: 80px;
  opacity: 0.65;
  pointer-events: none;
}

/* Content over the top */
.content {
  position: absolute;
  top: 0;
  left: 350px;
  right: 0;
  color: #fff;
}