a:hover {
    transition: 0.3s;
    cursor: pointer;
  
      & h2 {
        opacity: 1;
      }
  }
  
  #splash-page{
    scroll-snap-align: start;
    width: 100vw;
    height: calc(100vh - (53.2px + 5.4vh));
  }
  
  #scroll-cta{
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 2.7vh;
    width: 20%;
    gap: 10px;
    margin: 2.7vh 40%;
    transition: transform 0.3s ease-in-out;
  }
  
  #works-container{
    scroll-snap-align: start;
    margin: 0 15vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  
      & a.menu-item {
        width: 100%;
        padding: 1.5vh 0;
      }  
  
  }

  p {
    color: var(--text-accent);
  }

  h2 {
    color: var(--text);
    transition: 0.3s;
  }

  #works-container a:hover h2 {
    color: var(--text-accent);
    padding-left: 0.5vw;
  }
  
  #preview{
    border-radius: 16px;
    opacity: 0;
    position: absolute;
    transform: translateY(120vh);
    right: 8vw;
    width: 35vw;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, background-image 0.3s ease-in-out;
    z-index: 10;
  }

  footer {
    scroll-snap-align: end;
  }

@media (max-width: 768px) {
  #scroll-cta {
    display: none;
  }

  html {
    scroll-snap-type: none;
  }

  #splash-page {
    height: 55vh;
  }

  #preview {
    display: none;
  }

  #works-container {
    height: 40vh;
    margin: 0 10vw;
    padding-bottom: 7vh;
    & a.menu-item {
      padding: 1vh 0;
    }
    z-index: 3;
  }
}