Framer Motion/React- Inline styles by framer persisting after new variant is passed to the motion component

Question

Working on a 'Gallery' component that has two children, 'GalleryImage' which animates via Framer-Motion when the variable 'inView' is true which is provided by 'useInView' from react-intersection observer. My issue is that these images need completely different animations/initial styles based on the window width (represented by the variable 'viewport') but if the page is loaded in 'desktop' size and the images animate some kind of transform, but then the window is resized to 'mobile' where the image does not need to be transformed at all, the styles from the previous animation (or initial state rather) persist. How do I get these inline styles to clear out on rerender?

Repo: https://github.com/qcaodigital/cocktail_curations.git

export function GalleryImage({ img, viewport, reverse }){
    const [ref, inView] = useInView({threshold: .25, triggerOnce: true})
    let variant;
    if(viewport === 'mobile') {
        variant = transitions.mobileTransition;
    } else if(!reverse && img.card || reverse && !img.card) {
        variant = transitions.panFromRight
    } else if(!reverse && !img.card || reverse && img.card) {
        variant = transitions.panFromLeft
    } 
    return (
        <motion.div
            ref={ref} 
            key={img.url} 
            className={`${styles.Gallery__imgContainer} ${img.card ? styles.hasCard : null}`}
            variants={variant}
            animate={inView ? 'animate' : 'initial'}
        >
            {img.card && (
            <figcaption>
                <p>{img.card.subheader}</p>
                <a href={img.card.href}>
                    <h3>{img.card.header}</h3>
                </a>
            </figcaption>
            )}
            <motion.img src={img.url} alt={img.alt}/>
        </motion.div>
    )
}

----Transitions File-----

const transitions = {};

transitions.mobileTransition = {
    initial: {
        opacity: 0
    },
    animate: {
        opacity: 1,
        transition: {
            duration: 1
        }
    }
}

transitions.panFromRight = {
    initial: {
        opacity: 0,
        x: 0,
        y: 0
    },
    animate: {
        opacity: 1,
        x: -15,
        y: 15,
        transition: {
            duration: 1,
            opacity: {
                duration: 1.5
            }
        }
    }
}

transitions.panFromLeft = {
    initial: {
        opacity: 0,
        x: 0,
        y: 0
    },
    animate: {
        opacity: 1,
        x: 15,
        y: -15,
        transition: {
            duration: 1,
            opacity: {
                duration: 1.5
            }
        },
    }
}

export default transitions;