fix(images): drop forced upscaling, match live image sizes

The image macro was resizing every call to its width arg, including
upscaling 270x180 service thumbnails to 600x400 and rendering 400x400
doctor portraits at full size. Live serves service thumbs at native
270x180 (CSS-floated) and doctor portraits at 200x200.

- image macro: width=0 (default) skips resize, emits raw <img> with no
  width/height — lets theme CSS do the sizing, matching live pattern
- img shortcode: defaults width to 0 so callers can omit it
- service grid (home + 7 service pages): drop width=600
- doctor portraits on /team: width=200 (matches live render)

templates/index.html

@@ -65,7 +65,7 @@
         <div class="col-md-6">
           <div class="thumbnail clearfix">
             <a href="{{ card.url | safe }}">
-              {{ image::render(src=card.image, width=600, alt=card.title) }}
+              {{ image::render(src=card.image, alt=card.title) }}
             </a>
             <div class="caption">
               <h3><a href="{{ card.url | safe }}">{{ card.title }}</a></h3>

templates/macros/image.html

@@ -1,15 +1,32 @@
 {# Image-rendering macro, used both by templates (directly via import)
-   and indirectly by the `img` shortcode (which forwards to it). #}
+   and indirectly by the `img` shortcode (which forwards to it).
 
-{% macro render(src, width, alt="", class="") %}
-  {%- set source_path = "static/images/" ~ src -%}
-  {%- set resized = resize_image(path=source_path, width=width, op="fit_width", quality=85) -%}
-  <img
-    src="{{ resized.url | safe }}"
-    width="{{ resized.width }}"
-    height="{{ resized.height }}"
-    alt="{{ alt }}"
-    {%- if class %} class="{{ class }}"{% endif %}
-    loading="lazy"
-  >
+   With `width > 0`: resizes via Zola's image pipeline and emits explicit
+   width/height attributes (good for large hero/preview images).
+
+   With `width = 0` (default): emits a raw <img> served from /static/images/
+   with no width/height attributes — lets the theme CSS size the image, which
+   matches the live Grav site's pattern. Use this for content thumbnails that
+   the theme styles responsively. #}
+
+{% macro render(src, width=0, alt="", class="") %}
+  {%- set width = width | int -%}
+  {%- if width > 0 -%}
+    {%- set resized = resize_image(path="static/images/" ~ src, width=width, op="fit_width", quality=85) -%}
+    <img
+      src="{{ resized.url | safe }}"
+      width="{{ resized.width }}"
+      height="{{ resized.height }}"
+      alt="{{ alt }}"
+      {%- if class %} class="{{ class }}"{% endif %}
+      loading="lazy"
+    >
+  {%- else -%}
+    <img
+      src="/images/{{ src | safe }}"
+      alt="{{ alt }}"
+      {%- if class %} class="{{ class }}"{% endif %}
+      loading="lazy"
+    >
+  {%- endif -%}
 {% endmacro render %}

templates/shortcodes/img.html

@@ -1,8 +1,8 @@
 {# Image shortcode for use inside Markdown content.
    Forwards to the shared image macro so we have one source of truth.
    Usage in markdown:
-     {{ img(src="team/Olli.jpg", width=400, alt="Dr. Riemann") }}
-     {{ img(src="services/HV.jpg", width=600, alt="...", class="float-right") }}
+     {{ img(src="team/Olli.jpg", width=200, alt="Dr. Riemann") }}   # resized
+     {{ img(src="services/HV.jpg", alt="HV", class="float-right") }} # raw, CSS-sized
 #}
 {%- import "macros/image.html" as image -%}
-{{ image::render(src=src, width=width, alt=alt | default(value=""), class=class | default(value="")) }}
+{{ image::render(src=src, width=width | default(value=0), alt=alt | default(value=""), class=class | default(value="")) }}