$shape-circle-width: 1680px !default;
$shape-circle-height: 1080px !default;
$shape-circle-offset-x: 1680px !default;
$shape-circle-offset-y: 1080px !default;

@media screen {
  .shape-circle .slide:not([class*='shape-']),
  .slide.shape-circle {
    &::before {
      background-color: rgba(255, 255, 255, 0.87);
      border-radius: 50%;
      content: '';
      height: $shape-circle-height;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate3d(-50%, -50%, -1px) translate3d($shape-circle-offset-x, $shape-circle-offset-y, 0);
      width: $shape-circle-width;
      z-index: -1;
    }

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