Two featured images displaying based on browser window size

Hello,

I am coding a feature in GeneratePress Premium where featured image on frontpage changes in response to browser window size. There are two images: wide for desktop devices and a narrower image for mobile devices. They have different content (not only cropped).

I already got help to this problem elsewhere. The current solution is as following:
1. A desktop image set as featured image on frontpage in the standard WordPress featured image UI section,
2. An Advanced Custom Fields image field "mobile_featured_image" on frontpage which returns that image's ID and
3. The following custom code in child theme's functions.php file:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file.
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

remove_action('generate_after_header', 'generate_featured_page_header', 10);
add_action(
  'generate_after_header',
  function () {
    if (!is_page()) {
      return;
    }
    $mobile_featured_image = function_exists('get_field') ? get_field('mobile_featured_image') : false;
    if (!$mobile_featured_image && function_exists('generate_featured_page_header')) {
      // Do the default
      generate_featured_page_header();
      return;
    }

?>
  <div class="featured-image page-header-image page-header-image-with-mobile grid-container grid-parent">
    <?php
    the_post_thumbnail(
      apply_filters('generate_page_header_default_size', 'full'),
      [
        'class' => 'desktop-featured-image'
      ]
    );

    echo wp_get_attachment_image(
      $mobile_featured_image,
      apply_filters('generate_page_header_default_size', 'full'),
      false,
      [
        'class' => 'mobile-featured-image'
      ]
    );
    ?>
  </div>
<?php
  },
  10
);
?>

<style>
    .page-header-image-with-mobile .desktop-featured-image {
        display: none;
    }

    .page-header-image-with-mobile .mobile-featured-image {
        display: block;
    }

    @media ( min-width: 768px ) {
        .page-header-image-with-mobile .desktop-featured-image {
            display: block;
        }
        
        .page-header-image-with-mobile .mobile-featured-image {
            display: none;
        }
    }
</style>

The code is supposed to generate two featured images but only show one based on browser window size: wide desktop image for any window sizes above 768 pixels and a narrower mobile image below that value. However, now there are three featured images inside two featured image divs. The upper div has images that change their CSS display values as determined in functions.php (display: none or display: block) but the lower div is an extra one that should not be there at all. It has the wider desktop featured image set to the frontpage. See the HTML in the following screenshot:
https://ibb.co/WzgHZWp

Also, with the code in functions.php, WordPress does not allow any image uploads, not in the ACF "mobile_featured_image" field on frontpage or even in the standard Media Library. I had to set the mobile featured image as an image already uploaded in Media Library. In addition, the featured image UI section disappers on frontpage. When the functions.php code is commented out image uploads work and the featured image UI section appears again. In that case there is only one featured image showing on frontpage: that one set on the standard WordPress featured image UI section.

Actually, I am not sure whether there should be any featured image on frontpage without the custom code in functions.php. The reason why it is there might be the earlier solution where I created an GP Premium Header Element that had the featured image in it. However, I have disabled that Header Element by setting the location value to default (none or empty) and also disabled the whole Elements GP Premium module.

Is there a GP Premium related bug in the functions.php code or in GP Premium Elements module that generates the extra featured image? Thank you in advance!