.hero h1 {
    font-size: 26px;
    margin: 20px 0 12px;
}
.metamorphosis-case {
  margin: 2rem 0;
}
.metamorphosis-photos {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.metamorphosis-photos figure {
  margin: 0;
  text-align: center;
}
.metamorphosis-photos img {
  border-radius: 8px;
  height: auto;
  box-shadow: 0 2px 12px #0001;
}
@media (max-width: 768px) {
  .metamorphosis-photos {
    flex-direction: column;
    gap: 1rem;
  }
}