.hero-graphic--cloud-00
{
    --anim-height: 0.4rem;
    animation: Bob 5.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.hero-graphic--cloud-01
{
    --anim-height: 0.25rem;
    animation: Bob 6.667s ease-in-out infinite;
    animation-delay: 0.25s;
}

.hero-graphic--cloud-02
{
    --anim-height: 0.333rem;
    animation: Bob 6.75s ease-in-out infinite;
    animation-delay: 0.333s;
}

.hero-graphic--bird-00
{
    --anim-height: -0.12rem;
    animation: Bob 6s ease-in-out infinite;
    animation-delay: 0.15s;
}

.hero-graphic--bird-01
{
    --anim-height: -0.5rem;
    animation: Bob 5.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.hero-graphic--bird-02
{
    --anim-height: .667rem;
    animation: Bob 6s ease-in-out infinite;
}

@keyframes Bob {
    0%
    {
      transform: translatey(0);
    }

    50%
    {
      transform: translatey(var(--anim-height));
    }

    100%
    {
      transform: translatey(0);
    }
}