@media (prefers-reduced-motion: no-preference) {
  .blog-layout-full .codex-photo-float {
    --codex-photo-float-x: 0px;
    --codex-photo-float-y: 0px;
    --codex-photo-float-rotate: 0deg;
    --codex-photo-float-scale: 1;
    --codex-photo-inner-x: 0px;
    --codex-photo-inner-y: 0px;
    --codex-photo-inner-scale: 1.018;
    --codex-photo-shadow-y: 0px;
    --codex-photo-shadow-blur: 0px;
    --codex-photo-shadow-alpha: 0;
    backface-visibility: hidden;
    border-radius: 6px;
    contain: layout;
    display: block;
    isolation: isolate;
    line-height: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    transform:
      translate3d(var(--codex-photo-float-x), var(--codex-photo-float-y), 0)
      rotate(var(--codex-photo-float-rotate))
      scale(var(--codex-photo-float-scale));
    transform-origin: center center;
    width: 100%;
    will-change: transform;
  }

  .blog-layout-full .codex-photo-float picture,
  .blog-layout-full .codex-photo-float img {
    display: block;
    width: 100%;
  }

  .blog-layout-full .codex-photo-float img {
    backface-visibility: hidden;
    transform:
      translate3d(var(--codex-photo-inner-x), var(--codex-photo-inner-y), 0)
      scale(var(--codex-photo-inner-scale));
    transform-origin: center center;
    will-change: transform;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 782px) and (prefers-reduced-motion: no-preference) {
  .blog-layout-full .codex-photo-float {
    filter: drop-shadow(0 var(--codex-photo-shadow-y) var(--codex-photo-shadow-blur) rgba(35, 35, 35, var(--codex-photo-shadow-alpha)));
    will-change: transform, filter;
  }
}