body {
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: min(54vw, 780px);
  height: 560px;
  background: linear-gradient(135deg, rgba(218, 255, 162, 0.72), rgba(183, 242, 100, 0.27) 53%, transparent 82%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 35%);
  pointer-events: none;
}

.site-header,
main,
footer {
  position: relative;
  z-index: 1;
}

.hero { background-image: none; }

@media (max-width: 720px) {
  body::before {
    width: 78vw;
    height: 360px;
  }
}