From 59ca1a22f213f3550fba03eee9f3f63a6fe4a174 Mon Sep 17 00:00:00 2001
From: SriHV <sri.harsha.v.parupudi@ons.gov.uk>
Date: Tue, 26 Nov 2024 15:48:12 +0000
Subject: [PATCH] changes in visual tests

---
 ...ple-hero-navy-blue_0_document_1_tablet.png |  4 +-
 ...ple-hero-navy-blue_0_document_2_mobile.png |  4 +-
 src/components/hero/_hero.scss                | 41 ++++++++++---------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png
index 66efc7eb6c..70cffd7b1e 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fb04fcb457221a778885d6be30293932c35d556cfe78e827b4e070d897b42665
-size 55525
+oid sha256:a8fc9e9996c6ac55473f71e00e3d4b93bd8c1ec62ae71fa014ec92980f95ee3a
+size 47648
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png
index 1aecf4ab1b..4b1e1f5748 100644
--- a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5dc0d73854407a18c68ef88a1cdbacfcb1188aed535c67ca12985eb704696077
-size 45851
+oid sha256:d145151cf6efea869e30573593400b453619d9b8f2d3657fe4b2cd688a98160e
+size 44965
diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
index 84a98060c2..f679464395 100644
--- a/src/components/hero/_hero.scss
+++ b/src/components/hero/_hero.scss
@@ -19,6 +19,7 @@
             inset: 0;
             left: -40%;
             position: absolute;
+            width: 150%;
             @include mq(l) {
                 border-radius: 0 0 300% 150%;
                 left: 0;
@@ -93,7 +94,7 @@
         }
 
         &__circle-1 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-spring-green);
                 border-radius: 50%;
                 height: 59px;
@@ -105,7 +106,7 @@
         }
 
         &__circle-2 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
                 position: absolute;
@@ -117,7 +118,7 @@
         }
 
         &__circle-3 {
-            @include mq(m) {
+            @include mq(l) {
                 height: 60px;
                 right: 112px;
                 top: 25px;
@@ -129,7 +130,7 @@
         }
 
         &__circle-4 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
                 height: 60px;
@@ -140,7 +141,7 @@
             }
 
             &::before {
-                @include mq(m) {
+                @include mq(l) {
                     background-color: var(--ons-color-ocean-blue);
                     border-radius: 50%;
                     content: '';
@@ -155,7 +156,7 @@
         }
 
         &__circle-5 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
                 height: 14px;
@@ -166,7 +167,7 @@
             }
 
             &::before {
-                @include mq(m) {
+                @include mq(l) {
                     background-color: var(--ons-color-sky-blue);
                     border-radius: 50%;
                     content: '';
@@ -181,7 +182,7 @@
         }
 
         &__circle-6 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-spring-green);
                 border-radius: 50%;
                 height: 15px;
@@ -193,7 +194,7 @@
         }
 
         &__circle-7 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
                 height: 60px;
@@ -204,7 +205,7 @@
             }
 
             &::before {
-                @include mq(m) {
+                @include mq(l) {
                     background-color: var(--ons-color-night-blue);
                     border-radius: 50%;
                     content: '';
@@ -219,7 +220,7 @@
         }
 
         &__circle-8 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
                 bottom: 70px;
@@ -233,12 +234,12 @@
         &__circle-9 {
             background-color: var(--ons-color-spring-green);
             border-radius: 50%;
-            bottom: 35px;
+            bottom: 28px;
             position: absolute;
-            right: 18px;
-            width: 45px;
-            height: 45px;
-            @include mq(m) {
+            right: 15px;
+            width: 40px;
+            height: 40px;
+            @include mq(l) {
                 bottom: 40px;
                 height: 30px;
                 position: absolute;
@@ -248,7 +249,7 @@
         }
 
         &__circle-10 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-white);
                 border-radius: 50%;
                 bottom: 63px;
@@ -259,7 +260,7 @@
             }
 
             &::before {
-                @include mq(m) {
+                @include mq(l) {
                     background-color: var(--ons-color-aqua-teal);
                     border-radius: 50%;
                     content: '';
@@ -281,7 +282,7 @@
             position: absolute;
             bottom: -7px;
             right: 50px;
-            @include mq(m) {
+            @include mq(l) {
                 bottom: 33px;
                 height: 30px;
                 position: absolute;
@@ -291,7 +292,7 @@
         }
 
         &__circle-12 {
-            @include mq(m) {
+            @include mq(l) {
                 background-color: var(--ons-color-night-blue);
                 border-radius: 50%;
                 bottom: -35px;