.flex-mascot {
  position: relative;
  display: inline-block;
  width: var(--flex-mascot-size, 88px);
  height: var(--flex-mascot-size, 88px);
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}
.flex-mascot-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.flex-mascot--sm { --flex-mascot-size: 36px; }
.flex-mascot--md { --flex-mascot-size: 56px; }
.flex-mascot--lg { --flex-mascot-size: 140px; }
.flex-mascot--xl { --flex-mascot-size: 200px; }
.flex-mascot--hero { --flex-mascot-size: 200px; }

.learn-today-card--devina .flex-mascot { --flex-mascot-size: 36px; flex: 0 0 auto; }
.learn-bottom-nav-devina .flex-mascot { --flex-mascot-size: 22px; }
.tutor-buddy-mascot.flex-mascot,
.flex-mascot.tutor-buddy-mascot {
  --flex-mascot-size: min(42vw, 236px);
  width: var(--flex-mascot-size);
  height: var(--flex-mascot-size);
}
@media (max-width: 900px) {
  .tutor-buddy-mascot.flex-mascot,
  .flex-mascot.tutor-buddy-mascot {
    --flex-mascot-size: 112px;
  }
}

@media (max-width: 640px) {
  .flex-mascot--hero { --flex-mascot-size: 148px; }
}