.sera-mascot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  overflow: visible;
  background: transparent;
}

.sera-mascot-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 60%;
  animation: sera-mascot-breathe 8s ease-in-out infinite;
}

@keyframes sera-mascot-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -1.2%, 0) rotate(0.3deg) scale(1.006);
  }
}

.sera-mascot--hero {
  width: 100%;
}

.sera-mascot--privacy {
  width: min(100%, 360px);
}

.sera-mascot--reset {
  width: min(100%, 280px);
  margin: 0 auto;
}

.sera-mascot--panel {
  width: min(100%, 180px);
  margin: 0 auto 18px;
}

.sera-mascot--account {
  width: min(100%, 210px);
  margin: 0 auto;
}

.sera-mascot-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  overflow: visible;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sera-mascot-still {
    animation: none;
    transform: none;
  }
}

@media (max-width: 640px) {
  .sera-mascot--reset {
    width: min(100%, 210px);
  }

  .sera-mascot--panel {
    width: min(100%, 140px);
  }

  .sera-mascot--account {
    width: min(100%, 160px);
  }
}