diff --git a/app/views/histories/10_downing_street.html.erb b/app/views/histories/10_downing_street.html.erb
index f744e5350a..59d1397efe 100644
--- a/app/views/histories/10_downing_street.html.erb
+++ b/app/views/histories/10_downing_street.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/number-10-300.jpg", alt: "The front door of 10 Downing Street", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/number-10-300.jpg", alt: "The front door of 10 Downing Street", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [
diff --git a/app/views/histories/11_downing_street.html.erb b/app/views/histories/11_downing_street.html.erb
index 22b59f127b..6845b6eb42 100644
--- a/app/views/histories/11_downing_street.html.erb
+++ b/app/views/histories/11_downing_street.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/number-11-300.jpg", alt: "The front of 11 Downing Street", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/number-11-300.jpg", alt: "The front of 11 Downing Street", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [
diff --git a/app/views/histories/1_horse_guards_road.html.erb b/app/views/histories/1_horse_guards_road.html.erb
index f6835016ed..2b1d1cc1c5 100644
--- a/app/views/histories/1_horse_guards_road.html.erb
+++ b/app/views/histories/1_horse_guards_road.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/1-horse-guards-300.jpg", alt: "1 Horse Guards Road", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/1-horse-guards-300.jpg", alt: "1 Horse Guards Road", loading: "lazy", class: "govuk-!-width-full" %>
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [
         {
diff --git a/app/views/histories/history.html.erb b/app/views/histories/history.html.erb
index 6459f3b28b..b9f4146b42 100644
--- a/app/views/histories/history.html.erb
+++ b/app/views/histories/history.html.erb
@@ -27,7 +27,7 @@
     </div>
     <div class="govuk-grid-column-one-third">
       <figure class="govuk-!-margin-0">
-        <%= image_tag "history/horse-guards-vintage.jpg", alt: "An old painting of the Horse Guards building.", loading: "lazy", style: "width:100%" %>
+        <%= image_tag "history/horse-guards-vintage.jpg", alt: "An old painting of the Horse Guards building.", loading: "lazy", class: "govuk-!-width-full" %>
         <figcaption>Thomas Shotter Boys &ndash; A View of the Horse Guards from Whitehall. Government Art Collection.</figcaption>
       </figure>
     </div>
@@ -38,7 +38,7 @@
       <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
     </div>
     <div class="govuk-grid-column-one-half">
-      <%= image_tag 'how-gov-works/churchill_01.jpg', alt: "", loading: "lazy", style: "width:100%" %>
+      <%= image_tag 'how-gov-works/churchill_01.jpg', alt: "", loading: "lazy", class: "govuk-!-width-full" %>
     </div>
     <div class="govuk-grid-column-one-half">
       <%= render "govuk_publishing_components/components/heading", {
@@ -103,7 +103,7 @@
       </ul>
     </div>
     <div class="govuk-grid-column-one-half">
-      <%= image_tag 'history/government-buildings.jpg', alt: "", loading: "lazy", style: "width:100%" %>
+      <%= image_tag 'history/government-buildings.jpg', alt: "", loading: "lazy", class: "govuk-!-width-full" %>
     </div>
   </div>
 
@@ -112,7 +112,7 @@
       <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
     </div>
     <div class="govuk-grid-column-one-half">
-      <%= image_tag 'history/historical-documents.jpg', alt: "", loading: "lazy", style: "width:100%" %>
+      <%= image_tag 'history/historical-documents.jpg', alt: "", loading: "lazy", class: "govuk-!-width-full" %>
     </div>
     <div class="govuk-grid-column-one-half">
       <%= render "govuk_publishing_components/components/heading", {
diff --git a/app/views/histories/king_charles_street.html.erb b/app/views/histories/king_charles_street.html.erb
index 9af6983e95..54b5db2f20 100644
--- a/app/views/histories/king_charles_street.html.erb
+++ b/app/views/histories/king_charles_street.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/king-charles-street-300.jpg", alt: "King Charles Street", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/king-charles-street-300.jpg", alt: "King Charles Street", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [
diff --git a/app/views/histories/lancaster_house.html.erb b/app/views/histories/lancaster_house.html.erb
index 13cdc2c671..376845948c 100644
--- a/app/views/histories/lancaster_house.html.erb
+++ b/app/views/histories/lancaster_house.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/lancaster-house-300.jpg", alt: "Lancaster House", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/lancaster-house-300.jpg", alt: "Lancaster House", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [