$shape-square-width: 1680px !default;
$shape-square-height: 1680px !default;
$shape-square-offset-x: 1680px !default;
$shape-square-offset-y: 1080px !default;
$shape-square-rotate: -5deg !default;
$primary-100: rgba(255, 255, 255, 0.87) !default;

@media screen {
  .shape-square .slide:not([class*='shape-']),
  .slide.shape-square {
    &::before {
      background-color: $primary-100;
      content: '';
      height: $shape-square-height;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate3d(-50%, -50%, -1px) translate3d($shape-square-offset-x, $shape-square-offset-y, 0) rotate($shape-square-rotate);
      transition-duration: $transition-duration;
      width: $shape-square-width;
      z-index: -1;
    }

    &.present::before {
      transform: translate3d(-50%, -50%, -1px) translate3d($shape-square-offset-x + 100px, $shape-square-offset-y, 0) rotate($shape-square-rotate) scale(0.7);
    }

    &.depth-2:not(.present) > .heading,
    &.depth-3:not(.present) > .heading {
      max-width: $shape-square-width/2-100px;
      transform: translate3d(-$shape-square-offset-x - 70px, 440px, 0) translate3d(-50%, -50%, 0) scale(2) rotate($shape-square-rotate);
    }
  }
}