h1 {
  font-size: 16vw;
  font-style: italic;
  margin: 0 0 0.5em 0;
  letter-spacing: -0.04em;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
  @media screen and (min-width: 768px) {
    font-size: 7vw;
  } 

  & span {
    display: inline-block;
    padding: 0 0.25em;
  }
}
h2 {
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-size: 2.5vw;
  opacity: 0;
  position: absolute;
  left: .5em;
  bottom: .5em;
  transform: scale(0.8) translateY(100%);
  margin: 0;
  padding: 0.1em 0.4em 0.2em 0.4em;
  text-align: center;
  transform-origin: center center;
  width: auto;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
  .works .work:not(.active):hover & {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.works {
  padding: 15vw 0.5em 0.5em 0.5em;
  display: flex;      
  gap: 0.25em;
  flex-wrap: wrap;
  @media screen and (min-width: 768px) {
    gap: 0.25em;
    padding: 8.5vw 0.5em 0.5em 0.5em;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 20svh;
  }
}
.work {
  flex: 0 0 calc(50% - 0.125em );
  display: block;
  position: relative;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  overflow: hidden;
  
  @media screen and (min-width: 768px) {
    flex: 0 0 calc(33% - .125em);
  }
}
.workhero {
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio-heroes);
  object-fit: fill;
  visibility: hidden;
  display: block;
}