.hero-media {
  background-image: url(hero-underwater-ara-v3.webp);
  animation: heroAnimalsZoom 18s ease-out both;
}

@keyframes heroAnimalsZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1.08); }
}

@media (max-width: 560px) {
  .hero-media { animation-name: heroAnimalsZoomMobile; }
  @keyframes heroAnimalsZoomMobile {
    from { transform: scale(1.07); }
    to { transform: scale(1.03); }
  }
}