.hero-images .img.hero-img {
  transition: width 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.hero-images .img:not(.hero-img) {
  transition:
    width 0.8s cubic-bezier(0.85, 0, 0.15, 1),
    margin-inline 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.hero-text {
  transition:
    left 0.8s cubic-bezier(0.85, 0, 0.15, 1),
    max-width 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.hero-text .full-name {
  transition: font-size 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.hero-text .profession {
  transition: font-size 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

.hero-text .hero-bio {
  transition:
    font-size 0.8s cubic-bezier(0.85, 0, 0.15, 1),
    max-width 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

html:not(.loading) .hero-images .img:not(.hero-img) {
  width: 0;
  margin-inline: 0;
  pointer-events: none;
}

html:not(.loading) .hero-images .img.hero-img {
  width: 22vw;
}

html:not(.loading) .hero-text {
  left: 45vw;
  max-width: 42vw;
}

html:not(.loading) .hero-text .full-name {
  font-size: 4.2vw;
}

html:not(.loading) .hero-text .profession {
  font-size: 1rem;
  margin-top: 1.1rem;
}

html:not(.loading) .hero-text .hero-bio {
  font-size: 1.05rem;
  max-width: 40vw;
  margin-top: 1.6rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  html:not(.loading) .hero {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding-top: 6.5rem;
    padding-bottom: 3rem;
  }

  html:not(.loading) .hero-images {
    position: static;
    transform: none;
    margin: 0 auto 2.25rem;
    justify-content: center;
  }

  html:not(.loading) .hero-images .img.hero-img {
    width: 58vw;
    max-width: 280px;
  }

  html:not(.loading) .hero-text {
    position: static;
    transform: none;
    left: auto;
    max-width: 88vw;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;    
  }

  html:not(.loading) .hero-text .full-name {
    font-size: 9vw;
  }

  html:not(.loading) .hero-text .hero-bio {
    max-width: 100%;
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {
  html:not(.loading) .hero-images .img.hero-img {
    width: 66vw;
    max-width: 240px;
  }

  html:not(.loading) .hero-text .full-name {
    font-size: 11vw;
  }
}