.story {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 442px;
}

.story .hero-pyramid {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2193' height='1681' viewBox='0 0 2193 1681'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpolygon fill='%23E8E8ED' points='2193.011 .014 1920.788 1680.997 1028.783 1262.268' transform='matrix%28-1 0 0 1 3221.783 0%29'/%3E%3Cpolygon fill='%23FAFAFC' points='1028.777 0 1301 1681 0 1262.597'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.story .hero-pyramid.small {
  width: 400px;
  height: 400px;
  margin-left: -100px;
  margin-top: 250px;
  -webkit-filter: var(--pyramid-small-brightness);
          filter: var(--pyramid-small-brightness);
}

.story .hero-pyramid.large {
  width: 1000px;
  height: 1000px;
  margin-top: -200px;
  margin-left: 300px;
  -webkit-filter: var(--pyramid-large-brightness);
          filter: var(--pyramid-large-brightness);
}