renders images in hero widget only if attachment exist for live preview

modules/theme/views/hero-widget.html

@@ -34,18 +34,20 @@
 
   <div class="relative isolate flex flex-wrap justify-center items-center rounded-md overflow-hidden">
       {# applies image crop and focal point if exist #}
-      <img 
-        class="absolute -z-10 w-full h-full object-cover"
-        src="{{ apos.attachment.url(attachment, { size: 'full' }) }}" 
-        alt="{{ attachment._alt }}" 
-        {# attachment.srcset for the design system mocks andtesting #} 
-        srcset="{{ attachment.srcset or apos.image.srcset(attachment) }}"
-        width="{{ apos.attachment.getWidth(attachment) }}" 
-        height="{{ apos.attachment.getHeight(attachment) }}" 
-        {% if apos.attachment.hasFocalPoint(attachment) %}
-        style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}" 
-        {%- endif -%}
-        sizes="(max-width: 600px) 569px, 759px">
+      {% if attachment %}
+        <img 
+          class="absolute -z-10 w-full h-full object-cover"
+          src="{{ apos.attachment.url(attachment, { size: 'full' }) }}" 
+          alt="{{ attachment._alt }}" 
+          {# attachment.srcset for the design system mocks andtesting #} 
+          srcset="{{ attachment.srcset or apos.image.srcset(attachment) }}"
+          width="{{ apos.attachment.getWidth(attachment) }}" 
+          height="{{ apos.attachment.getHeight(attachment) }}" 
+          {% if apos.attachment.hasFocalPoint(attachment) %}
+          style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}" 
+          {%- endif -%}
+          sizes="(max-width: 600px) 569px, 759px">
+      {% endif %}
     {# Content container #}
     <div
       class="py-20 px-6 lg:px-8 xl:px-16 w-full text-center overflow-hidden prose-headings:mx-auto prose-p:mx-auto prose-headings:text-center prose-headings:break-anywhere prose-p:text-center md:prose-headings:max-w-3xl md:prose-p:max-w-3xl prose-headings:mb-8 prose-p:m-0 prose-headings:text-5xl prose-headings:font-extrabold prose-p:break-anywhere prose-p:text-base lg:prose-headings:text-7xl lg:prose-headings:font-extrabold lg:prose-headings:leading-tight md:prose-p:text-lg{{ bgCls }}{{ h2Cls }}{{ pCls }}{{h2Mt}}">
@@ -109,20 +111,21 @@
   {%- set h2Mt = ' prose-headings:mt-4' if widget.caption else '' -%}
 
   <div class="relative isolate flex flex-wrap justify-center overflow-hidden rounded-md">
-
-      <img 
-        title="{{ attachment.title }}" 
-        class="absolute -z-10 w-full h-full object-cover lg:w-1/3 rounded-md{{ imageSide }}"
-        src="{{ apos.attachment.url(attachment, { size: 'full' }) }}" 
-        alt="{{ attachment._alt }}" 
-        {# attachment.srcset for the design system mocks and testing #} 
-        srcset="{{ attachment.srcset or apos.image.srcset(attachment) }}"
-        width="{{ apos.attachment.getWidth(attachment) }}" 
-        height="{{ apos.attachment.getHeight(attachment) }}" 
-        {% if apos.attachment.hasFocalPoint(attachment) %}
-        style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}" 
-        {%- endif -%}
-        sizes="(max-width: 600px) 569px, 759px">
+      {% if attachment %}
+        <img 
+          title="{{ attachment.title }}" 
+          class="absolute -z-10 w-full h-full object-cover lg:w-1/3 rounded-md{{ imageSide }}"
+          src="{{ apos.attachment.url(attachment, { size: 'full' }) }}" 
+          alt="{{ attachment._alt }}" 
+          {# attachment.srcset for the design system mocks and testing #} 
+          srcset="{{ attachment.srcset or apos.image.srcset(attachment) }}"
+          width="{{ apos.attachment.getWidth(attachment) }}" 
+          height="{{ apos.attachment.getHeight(attachment) }}" 
+          {% if apos.attachment.hasFocalPoint(attachment) %}
+          style="object-position: {{ apos.attachment.focalPointToObjectPosition(attachment) }}" 
+          {%- endif -%}
+          sizes="(max-width: 600px) 569px, 759px">
+      {% endif %}
     {# Content container #}
     <div
       class="