.home-floating-shatner {
  --home-float-offset-right: var(--space-lg);
  --home-float-offset-bottom: 0px;
  --home-float-width: clamp(170px, 18vw, 300px);
  --home-float-x: calc(100% + var(--space-2xl));
  --home-float-y: 0px;

  position: fixed;
  right: var(--home-float-offset-right);
  bottom: var(--home-float-offset-bottom);
  z-index: var(--z-sticky);
  width: var(--home-float-width);
  max-width: 42vw;
  pointer-events: auto;
  transform: translate3d(var(--home-float-x), var(--home-float-y), 0);
  transition:
    transform var(--duration-slower) var(--ease-out-expo),
    opacity var(--duration-normal) var(--ease-out);
  will-change: transform;
  opacity: 0;
}

.home-floating-shatner.is-visible {
  --home-float-x: 0px;
  opacity: var(--opacity-100);
}

.home-floating-shatner.is-cards-overlap-hidden {
  --home-float-x: calc(100% + var(--space-md));
  opacity: 0;
  pointer-events: none;
}

.home-floating-shatner img {
  display: block;
  width: 100%;
  height: auto;
}

.home-floating-shatner__link {
  display: block;
  line-height: 0;
}

@media (max-width: 1140px) {
  .home-floating-shatner {
    --home-float-offset-right: var(--space-md);
    --home-float-offset-bottom: 0px;
    --home-float-width: clamp(140px, 23vw, 220px);
  }
}

@media (max-width: 768px) {
  .home-floating-shatner {
    --home-float-offset-right: var(--space-sm);
    --home-float-offset-bottom: max(0px, env(safe-area-inset-bottom));
    --home-float-width: clamp(105px, 30vw, 145px);
    opacity: 0.92;
  }
}

@media (max-width: 480px) {
  .home-floating-shatner {
    --home-float-offset-right: 6px;
    --home-float-offset-bottom: max(0px, env(safe-area-inset-bottom));
    --home-float-width: clamp(76px, 25vw, 104px);
    max-width: 34vw;
    opacity: 0.9;
  }
}

@media (max-width: 360px) {
  .home-floating-shatner {
    --home-float-offset-right: 4px;
    --home-float-width: clamp(68px, 23vw, 92px);
    max-width: 32vw;
    opacity: 0.88;
  }
}