.module-blockquote {
    position: relative;
  }

  .module-blockquote .module-inner {
    position: relative;
    z-index: 2;
  }

  .module-blockquote > .background {
    position: absolute;
    top: calc(-150 * var(--base-unit));
    left: 0;
    right: 0;
    bottom: calc(-75 * var(--base-unit));
    z-index: 1;
    pointer-events: none;
    transform: translateY(calc(var(--parallax-y, 0) * -5vh));
  }

  .module-blockquote > .background .slant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    z-index: 1;
    clip-path: polygon(0% var(--slant-angle), 100% 0, 100% calc(100% - var(--slant-angle)), 0% 100%);
  }
  
  
  
  .module-blockquote .module-wrap {
    max-width: var(--grid-10-fixed-);
    box-sizing: border-box;
    padding-left: var(--grid-1);
    position: relative;
  }
  
  .module-blockquote blockquote {
    color: var(--base-color-dark-blue);
    position: relative;
  }
  
  .module-blockquote blockquote p {
    --scale-breakpoint: 1200;
  }
  
  .module-blockquote .quotation-mark {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(var(--grid-1-) * -1);
    pointer-events: none;
    transform: translateY(-50%);
  }
  
  .module-blockquote blockquote svg {
    width: calc(31 * var(--base-unit));
    height: auto;
  }
  
  .module-blockquote blockquote svg path {
    fill: var(--base-color-dark-blue);
  }
  
  .module-blockquote figcaption {
    margin-top: calc(40 * var(--base-unit));
  }
  
  
  
  
  
  
  
  
  @media (max-width: 500px) {
    
    .module-blockquote > .background {
      top: calc(-140 * var(--base-unit));
      bottom: calc(-140 * var(--base-unit));
    }
    
    .module-blockquote > .background .slant {
      clip-path: unset;
      transform: skewY(-3deg);
    }
    
  }