.personal-logo-image {
  display: block;
  height: auto;
  width: clamp(7rem, 14vw, 18rem);
}

.header_wrap.is-home .personal-logo-image {
  clip-path: inset(0 0 calc(100% - 100% * clamp(0, var(--progress, 0), 1)) 0);
  opacity: clamp(0, var(--progress, 0), 1);
}

#animatedLogo {
  opacity: 0;
}

.personal-animated-logo {
  display: block;
  height: auto;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: var(--grid-margin);
  transform: translateX(-50%);
  width: calc(100% - var(--grid-margin) * 2);
}

@media (max-width: 767px) {
  .personal-logo-image {
    width: clamp(6.5rem, 30vw, 9rem);
  }
}