Profile and Service - Minor image and grid tweaks

Author: srcdev

app/components/02.molecules/profile-section/ProfileSection.vue

@@ -13,9 +13,9 @@
         axis="vertical"
         font-size="large"
         :text-content="[
-          { text: 'Your', styleClass: 'accent' },
+          { text: 'Your', styleClass: 'normal' },
           { text: 'mobile hairdresser', styleClass: 'accent' },
-          { text: 'in Bath', styleClass: 'accent' },
+          { text: 'in Bath', styleClass: 'normal' },
         ]"
         :style-class-passthrough="['mb-20']"
       />
@@ -99,6 +99,7 @@ watch(
 
       .profile-picture {
         object-fit: cover;
+        width: 100%;
       }
     }
 

app/components/03.organisms/services/services-card/ServicesCard.vue

@@ -64,6 +64,7 @@ watch(
 
   .image-wrapper {
     aspect-ratio: 3/4;
+    border-radius: 8px;
     overflow: hidden;
 
     .image {

app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -170,12 +170,19 @@ watch(
 
   .services-section__grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(446px, 1fr));
-    gap: 3rem;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+
+    @media (width >= 768px) {
+      grid-template-columns: repeat(auto-fit, minmax(446px, 1fr));
+      gap: 3rem;
+    }
   }
 
   .image-wrapper {
     align-self: start;
+    border-radius: 8px;
+    overflow: hidden;
 
     .image {
       display: block;