How can I change Banner Height separately for deskop & Mobile?

[Shawn512]

Site: Julibees.com

Background: I use code to make different images between dektop & mobile, like this 

Question

However, the banner height option is still not separated

any idea to figure it out?

[NomtechSolution]

1. In the theme editor, navigate to the section containing the banner that you want to adjust the height for. This could be the "Hero" section or a custom section that includes a banner.
2. Identify the CSS selector for the banner element. This might involve inspecting the element using your browser's developer tools.
3. Once you have identified the CSS selector, you can add custom CSS code to modify the height for each responsive breakpoint. Here's an example:

/* Example CSS selector for the banner element */
.hero-banner {
  height: 300px; /* Default height for desktop */

  @media screen and (max-width: 767px) {
    height: 200px; /* Height for mobile devices */
  }
}

[Shawn512]

Hey, thank u so much.

still confusing how to find the selector. here is my browser's developer tool shows:

and here is some code of this part: 

<div
  id="Banner-{{ section.id }}"
  class="{% if section.settings.enable_image_mobile %}banner-image-separate-mobile {% endif %} banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
>
  {%- if section.settings.image != blank -%}
    <div class="media-first banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = "(min-width: 750px) 100vw"
        elsif section.settings.image_2 != blank
          assign sizes = "100vw"
        else
          assign sizes = "100vw"
        endif
      -%}

could you tell me the exact css code? thanks.
I want to make the #2 picture shown as itselfs height but not the 1# pic's