Different hero image for single posts which is not the featured image

By default ACF stores the Image ID not its URL.
Can you send us a screenshot of your ACF field settings for the Image?

Hi there,

Here is a link to the settintgs:
https://imgur.com/lk26qOr

Here is the css on the site:

.slideout-overlay {
background-color: rgba(0, 0, 0, 0.27);
}
.slideout-navigation .slideout-menu {
padding-top: 60px!important;
}
.main-navigation.has-branding .inside-navigation {
	margin: 10px 16%;
}
.navigation-branding img{
    height: 80px;
    width: auto;
}
.cat-links {
    display: none;
}
.entry-meta {
    font-size: 100%;
    line-height: 1.5;
    font-weight: bold;
}
.site-info a:hover {
	color: palegoldenrod;
}

.page-hero {
font-variant: small-caps;
}
.inside-page-hero {
	max-width: 75%;
		margin: 0 auto;
}
blockquote {
border-left: 2px solid #438b15;
padding: 15px;
font-size: 1.1em;
font-style: italic;
margin: 0 0 1.5em 2em;
position: relative;
}
ul {
color: #423e37;
}
.editor-post-title__block .editor-post-title__input {
	color: black!important;
}

@media (max-width: 768px) {
#mobile-header .inside-navigation, .main-navigation.has-branding .inside-navigation {
	margin: 0 auto;
	}

.main-navigation .main-nav ul li a {color: #423e37;
background: white;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
color: white;
background-color: #438b15;}
	
.main-navigation .main-nav ul li:hover{
	color: white;
background: #438b15;
}
.main-navigation .main-nav ul li:hover > a{
color: white;
background-color: #438b15;
}
}

If the field is an Image type then you should be able to edit that and change the return value to URL:

https://www.advancedcustomfields.com/resources/image/

then you should be able to use the method here to get that URL:

https://generatepress.com/forums/topic/different-hero-image-for-single-posts-which-is-not-the-featured-image/#post-1186889