.poster-layout {
  position: relative;
  width:100%;
  height:100vh;
}

.poster {
  position: absolute;
  transform-origin:top left;     /* scale from top-left corner */
  transition:transform .3s ease;
  top: attr(data-y %);
  left: attr(data-x %);
  width: attr(data-width vw);
  min-width: 100px;
  text-align: center;

  &:hover,
  &:focus {
    transform:scale(1.08)
  }

  img {
    /*mask-size: contain;*/
    /*mask-position: center;*/
    /*mask-repeat: no-repeat;*/
    /*mask-image: url("/assets/icons/dino.svg");*/
  }
}

.overview {
  position: relative;
  padding: 0 var(--padding);
}

.overview-prevnext {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;

  > a {
    position: absolute;
    top: 50%;
    display: block;
  }

  > .overview-prevnext__prev {
    left: 0;
    transform-origin: bottom left;
    transform: rotate(90deg);
  }

  > .overview-prevnext__next {
    right: 0;
    transform-origin: bottom right;
    transform: rotate(270deg);
  }
}