main.main > .inner {
    position: relative;
  }

  .module-work-hero {
    position: relative;
    min-height: 700px;
  }
  
  .module-work-hero > .background {
    display: block;
    position: fixed;
    inset: 0;
    bottom: auto;
    height: 100vh;
    z-index: -1;
    transition: transform 1750ms var(--ttf-5);
    transition-delay: 850ms;
    --scale: 1.05;
    transform: scale(var(--scale));
  }
  
  .module-work-hero > .background > div {
    position: absolute;
    inset: 0;
    background: var(--background-image) no-repeat center center;
    background-size: cover;
    transform: translateY(calc(var(--parallax-y, 0) * 50px));
  }
  
  .sn-pt-enter-to .module-work-hero > .background,
  .sn-pt-enter-first .module-work-hero > .background {
    --scale: 1;
    transition-delay: 200ms;
  }
  
  .module-work-hero-shade,
  .sn-pt-leave-to .module-work-hero-shade {
    content: '';
    display: block;
    position: absolute;
    top: 700px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--base-color-dark-gray);
    z-index: 2;
  }
  
  .sn-pt-enter-to .module-work-hero-shade,
  .sn-pt-enter-active .module-work-hero-shade {
    transition-delay: 250ms;
    transition-duration: 500ms;
    transform: none;
  }
  
  .module-work-hero-shade,
  .sn-pt-leave-to .module-work-hero-shade,
  .sn-pt-enter-before-first .module-work-hero-shade {
    transform: translateY(calc(100vh - 700px));
    transition: transform 500ms 250ms var(--ttf-5);
  }
  
  .sn-pt-leave .module-work-hero-shade {
    transition-delay: 1000ms !important;
    transition-duration: 0ms;
  }
  
  .module-work-hero ~ .module {
    position: relative;
    z-index: 3;
  }

  .module-work-hero .headline {
    position: absolute;
    top: 630px;
    left: var(--page-padding-left);
    right: var(--page-padding-right);
    transform: translateY(-100%);
    color: var(--base-color-white);
    --transition-delay: 150ms;
  }
  
  .module-work-hero .headline > .spanned {
    max-width: var(--module-wrap-max-width);
    width: 100%;
    margin: 0 auto;
    margin-bottom: -0.15em;
  }
  
  .module-work-hero .spanned > span {
    clip-path: inset(-10% -10% -10% -10%);
  }
  
  .module-work-hero .spanned > span > span {
    margin-left: -0.05em;
    display: inline-block;
    --index: 1;
    transition: transform 750ms;
    transition-delay: 250ms;
    transition-timing-function: var(--ttf-2); 
    transform: translateY(120%);
  }

  .sn-pt-enter-to .module-work-hero .spanned > span > span,
  .sn-pt-enter-first .module-work-hero .spanned > span > span {
    transition-delay: 200ms;
    transform: none;
  }
  
  
  
  
  
  
  
  nav.works-nav {
    position: fixed;
    left: 0;
    top: 400px;
    width: var(--logo-width);
  }
  
  .is-transitioning-between-works nav.works-nav {
    z-index: 1000;
  }
  
  body.scrolled-100vh nav.works-nav {
    opacity: 0;
    pointer-events: none;
  }
  
  nav.works-nav .buttons a {
    display: block;
    width: 100%;
    padding-top: 75%;
    height: 0;
    position: relative;
    background: var(--base-color-black);
    transform: none;
    transition: transform 750ms var(--ttf-6);
    transition-delay: 0ms;
  }
  
  .sn-pt-enter nav.works-nav .buttons a {
    transform: translateX(-100%);
  }
  
  nav.works-nav .buttons a.btn-next {
    background: var(--base-color-dark-gray);
  }
  
  nav.works-nav .buttons a.btn-prev {
    transition-delay: 50ms;
  }
  
  nav.works-nav .buttons a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: auto;
  }
  
  nav.works-nav .counter {
    height: 60px;
    position: relative;
  }
  
  .counter-label {
    left: calc(50% - 1px);
    text-transform: uppercase;
    color: var(--base-color-white);
  }
  
  
  
  
  
  
  @media (max-width: 800px) {
    
    .module-work-hero .headline {
      top: 565px;
    }
    
  }
  
  
  
  
  
  
  
  
  
  @media (max-width: 500px) {
    
    .module-work-hero .cpy-200 {
      font-size: 40px;
    }
    
    .module-work-hero .headline {
      top: 41vh;
      left: calc(var(--page-padding-left) + var(--module-wrap-offset-left));
    }
    
    nav.works-nav {
      width: 72px;
      top: 30vh;
      display: none;
    }
    
    .module-work-hero {
      min-height: 1px;
    }
    
    .module-work-hero-shade {
      top: 50vh;
    }
    
    .module-work-hero .module-inner {
      padding-left: calc(var(--page-padding-left) + var(--module-wrap-offset-left));
      padding-top: 100px;
      padding-bottom: 100px;
      box-sizing: border-box;
      height: 50vh;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
    }
    
    .module-work-hero > .background {
      height: 50vh;
      position: absolute;
    }
    
    .module-work-hero > .background > div {
      transform: none;
    }
    
  }