From 1d185e9ff47b3a8097749892a30dad21e6804943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Mon, 20 Mar 2023 09:59:39 +0100
Subject: [PATCH] Edit services illustration size and add prefixed
 text-decoration property for WebKit compatibility

---
 assets/styles/main.scss        |  1 +
 components/ServicesSection.vue | 18 ++++++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 6466fe0..6049b6e 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -140,6 +140,7 @@ em {
 a {
     color: var(--secondary-color);
     text-decoration: underline var(--primary-accent-color);
+    -webkit-text-decoration: underline var(--primary-accent-color); // Prefixed shorthand for WebKit (Safari) compatibility
     border-radius: 2px;
     transition: color 200ms ease-in-out;
 
diff --git a/components/ServicesSection.vue b/components/ServicesSection.vue
index a9a5197..285ac23 100644
--- a/components/ServicesSection.vue
+++ b/components/ServicesSection.vue
@@ -90,10 +90,10 @@
     .services {
         display: grid;
         grid:
-            'illustration' auto
-            'title' auto
-            'list' auto
-            / 1fr;
+            '. illustration .' auto
+            'title title title' auto
+            'list list list' auto
+            / 1fr minmax(15rem, 30rem) 1fr;
         place-content: start;
         place-items: start;
         row-gap: 2rem;
@@ -102,11 +102,9 @@
         &__illustration {
             grid-area: illustration;
             width: 100%;
-            display: flex;
-            justify-content: center;
 
             svg {
-                max-width: 30rem;
+                width: 100%;
                 height: auto;
             }
         }
@@ -129,9 +127,9 @@
         @media screen and (min-width: $tablet-media-query) {
 
             grid:
-                'title illustration' auto
-                'list list' auto
-                / auto 1fr;
+                'title . illustration .' auto
+                'list list list list' auto
+                / auto 1fr minmax(15rem, 30rem) 1fr;
 
             &__title {
                 place-self: end start;