Fullwidth featured image behind the title (with function.php)

// Fullwidth featured image behind the title in single posts, pages or both.
    // Register a custom image size for hero images on single posts.
    add_image_size( 'hero-image', 1280, 350, true );
    add_action( 'genesis_after_header', 'genesiskit_singular_hero_title_section' );
    function genesiskit_singular_hero_title_section() {
    	// if we are not have one of the following contitions (uncomment the condition you want), abort.
        // if ( ! is_singular( 'post' ) ) {// Single Posts Only - Supports custom post types.
        // if ( ! is_singular( 'page') ) {// Pages Only - Supports custom post types.  
    	if ( ! is_singular( ) ) {// Supports Pages and Posts - Supports custom post types.
          
    		return;
    	}
    	// set $image to URL of featured image. If featured image is not present, set a fallback image, hero-image.jpg in child theme's images folder.
    	if ( has_post_thumbnail() ) {
    		$image = genesis_get_image( 'format=url&size=hero-image' );
    	} else {
    		$image = get_stylesheet_directory_uri() . '/images/hero-image.jpg';
    	} ?>
    	<div class="hero-title" id="hero-title" role="banner" style="background-image: url('<?php echo $image; ?>')">
    		<div class="wrap">
    			<?php genesis_do_post_title(); ?>
    		</div>
    	</div>
    	<?php
    	//* Remove entry title.
    	remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
        }

    /*  HERO featured image with Title
    ------------------------- */
    .hero-title {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      background-color: #000;
      color: #fff;
    }
    .hero-title .archive-title {
        font-size: 50px;
        font-size: 5rem;
    }
    .hero-title .archive-description {
        margin-bottom: 10px;
    }
    .hero-title:after {
      content: "";
      display: block !important;
      position: absolute;
      background: rgba(42, 49, 57, 0.5);
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      pointer-events: none;
      transition: all 0.3s ease;
    }
    .hero-title .wrap {
      position: relative;
      z-index: 2;
    }
    .hero-title {
      padding: 100px 5px;
      margin: 0;
      text-align: center;
      color: #fff;
    }
    .hero-title .entry-title {
      font-size: 35px;
      font-size: 3.5rem;
      font-weight: 700;
    }
    .hero-title .wrap {
      max-width: 896px;
    }
    .hero-title .wrap {
      margin: 0 auto;
      padding-left: 1vw;
      padding-right: 1vw;
    }
    @media only screen and (min-width: 768px) {
      .hero-title {
        padding: 120px 10px;
        margin-top: 0;
        text-align: center;
        color: #fff;
      }
      .hero-title .entry-title {
        font-size: 50px;
        font-size: 5rem;
        font-weight: 700;
        color: #fff;
      }
    }
    .hero-title .wrap {
      max-width: 896px;
    }
    .hero-title .wrap {
      margin: 0 auto;
      padding-left: 1vw;
      padding-right: 1vw;
    }