How to make my text block (+ image block) into a sticky element with CSS?

Site URL: https://www.jeannemarie.space/

I currently have two pieces of code in place right now to make a sticky effect, but I have some issues I wanted to fix if possible!

*current code : 

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1660163627625_1012844 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

@media screen and (min-width:768px) {
.fe-block.fe-block-yui_3_17_2_1_1660163627625_717246 {
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    z-index: 999;
}
}

The element(s) I want to be "sticky" are the yellow circle (which is an image block) and the "my work" text (which is a text block overlapping the circle).

First, I want the combined element to start moving with me in the middle of the page as you begin to scroll, not start moving at the top of the page like it is now, because it interferes with my sticky navigation menu and just doesn't have the landing effect I want that way.

Second, I also want to know if there's a way I can make the two elements stay together while they scroll and not break apart like they are now when they move. If the simple solution is to make this a single element as a button instead of custom text and image background then that is fine. 

Last and most important thing I want to try to accomplish is for the sticky effect to end within the same section right after the " I collaborate with small businesses..." paragraph.

P.S. I also want this effect on mobile, but my current code doesn't seem to do that...