Container, dynamic feature image. Nested grid. Read more button not working

Goal is the whole top root parent container holding all the the flex items (container wrapper housing a dynamic background feature image) to be a link to the post.

Because I have other grids on top, flex items with category buttons, author meta, etc. I can't use the dynamic option feature because i have categories, author meta above. Container has a z-index higher than the back to top button. On mobile back to top doesn't work.

Please see my forum support thread from last week - secondary issue:

https://generatepress.com/forums/topic/blog-layout-as-a-grid-using-elements-block-content-template/

What's different here is now I have nested grid container within a wrapper flexbox parent container.

Sincere thanks for your assistance. Hope all is well

Brad

_________________________________

Screenshot 1
Main Goal - Read More Link link to target wrapper container.

https://www.dropbox.com/s/djaxqmpqdzandzp/Read-more-link-issue-main-goal.jpg?dl=0

Screenshot 2
Inner flex item read more hotspot only goes half way up yet has no padding-top.

https://www.dropbox.com/s/7tzzkfasqtupcpw/Inner-flex-item-read-more-hotspot-half-works.jpg?dl=0

Screenshot 3
Green Read More hot link goes width of container.
https://www.dropbox.com/s/pozadg1nhfvr8th/Flex-item-right-too-much-vertical-flex-1.jpg?dl=0

Screenshot 4
Elements structured containers

https://www.dropbox.com/s/300wxheg9wl3uvn/Element-container-structure-class-name.jpg?dl=0

Screenshot 5
Css numbers with screenshot of showcase page

https://www.dropbox.com/s/ojwh7o54y2dvbhi/Css-numbered.jpg?dl=0

Screenshot 6

Delete Archive: Showcase title - Searched. Can't figure this out. My apologies in advance. It's probable something simple

https://www.dropbox.com/s/4q2ccasafyb17vv/Archive-showcase-delete-title-goal.jpg?dl=0

_____________________________

CSS

.buttons-container-link a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.buttons-container-link {
z-index: 2;
position: relative;
}

.buttons-container-link-outer a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.buttons-container-link-outer {
z-index: 2;
position: relative;
}

.j66co-cpt-display-flexbox-container-1 {
display: flex;
flex-direction: column;
height: 800px;
justify-content: center;
align-items: center;
padding-top: 0px;
padding-bottom: 36px;
}

.j66co-cpt-display-flexbox-container > * {
flex: 1;
min-width: 0;
min-height: 0;
}

.j66co-cpt-showcase-grid-container-inner-left {
width: 320px;
height: 620px;