@keyframes goBig {
    from {transform: scale(1);}
    to {transform: scale(2);}
}


/* todo: 
 fix "
        In any case, you don't want a separate <img /> element on the page.
        ... Why shouldn't there be a <img> element on the page inside the <button>?
            <Hazmen Sep 23, 2025 at 17:42>
        It becomes an object inside the button, not the actual button. And the area that will detect the click will not match the image.
    "
 https://stackoverflow.com/questions/16131988/making-an-image-act-like-a-button 
*/

#grow {
    & img {
        /* background: red; */
        transition: all 2s ease;
        transition-behavior: allow-discrete;

        &:hover {
            /* background: blue; */
            animation: goBig 1s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }
    }
}