:root {
  --hummingbird-width: 301px;
  --hummingbird-height: 199px;
  --hummingbird-frames: 11;
  --hummingbird-total-width: calc(var(--hummingbird-width) * var(--hummingbird-frames));
}

.anim-hummingbird {
  width: var(--hummingbird-width);
  height: var(--hummingbird-height);
  background: url('./anim-hummingbird.png') no-repeat;
  background-size: var(--hummingbird-total-width) 100%;
  animation: anim-hummingbird-anim 0.55s steps(var(--hummingbird-frames)) infinite;
  image-rendering: pixelated;
}

@media (max-width: 768px) {
  .anim-hummingbird {
    --hummingbird-width: 190px;
    --hummingbird-height: calc(190px * (199 / 301)); /* Maintient le ratio 301/199 */
    --hummingbird-total-width: calc(var(--hummingbird-width) * var(--hummingbird-frames));
  }
}

@keyframes anim-hummingbird-anim {
  0% { background-position: 0 0; }
  100% { background-position: calc(-1 * var(--hummingbird-total-width)) 0; }
}