making it responsive

data.json

@@ -7,7 +7,7 @@
             "resume":"I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.",
             "testimonial": "I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup." ,
             "color": "hsl(263, 55%, 52%)",
-            "colorFont" : "hsl(0, 0%, 100%)"
+            "colorFont" : "hsl(222, 100%, 95%)"
         },
         {
             "studentName" : "Jonathan Walters",
@@ -16,7 +16,7 @@
             "resume":"The team was very supportive and kept me motivated",
             "testimonial": "I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. " ,
             "color": "hsl(217, 19%, 35%)",
-            "colorFont" : "hsl(0, 0%, 100%)"
+            "colorFont" : "hsl(228, 100%, 95%)"
         },
         {
             "studentName" : "Jeanette Harmon",
@@ -34,7 +34,7 @@
             "resume":"Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.",
             "testimonial": "The staff seem genuinely concerned about my progress which I find really refreshing. The program  gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of smart and amazing people.",
             "color" : "hsl(219, 29%, 14%)",
-            "colorFont" : "hsl(0, 0%, 100%)"
+            "colorFont" : "hsl(228, 100%, 95%)"
         },
         {
             "studentName" : "Kira Whittle",

style.css

@@ -3,8 +3,8 @@
     --Moderateviolet: hsl(263, 55%, 52%);
     --VerydarkGrayishblue: hsl(217, 19%, 35%);
     --VerydarkBlackishblue: hsl(219, 29%, 14%);
-    --White: hsl(0, 0%, 100%);
-    --BackgroundBody: hsl(213, 44%, 95%);
+    --White: hsl(0, 22%, 96%);
+    --BackgroundBody: hsl(240, 69%, 97%);
 }
 *{
     margin: 0;
@@ -21,23 +21,24 @@ body{
     justify-content: center;
     align-items: center;
     background-color: var(--BackgroundBody);
-    height: 100dvh;
-    padding: 2em;
+    min-height: 100vh;
+    padding: 0.5em;
 }
 
 main{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-auto-flow: dense;
     grid-gap: 20px;
-    width: 90%;
+    width: 87%;
+    padding: 1em;
 }
 
 
 .testimonial-container{
     flex-direction: column;
     justify-content: space-between;
-    padding: 1.4rem;
+    padding: 1.7rem;
     border-radius: 8px;
     .student-info{
         flex-direction: row-reverse;
@@ -49,18 +50,19 @@ main{
         }
     }
     h1{
-        font-size: 18px;
+        font-size: 16px;
         font-weight: 600;
     }
     p{
-        font-size: 14px;
+        font-size: 13px;
     }
     .resume{
-        font-size: 20px;
+        font-size: 19px;
         font-weight: 500;
     }
     .testimonial{
         margin: 10px 0;
+        line-height: 1.2em;
     }
     img{
         border-radius: 50%;
@@ -69,6 +71,9 @@ main{
 }
 .daniel-clifford{
     grid-column: auto / span 2;
+    background-image: url('./images/bg-pattern-quotation.svg');
+    background-repeat: no-repeat;
+    background-position: 90% 10%;
 }
 .kira-whittle{
     grid-row: auto / span 2;
@@ -81,13 +86,14 @@ main{
 }
 
 @media (max-width: 1000px) {
-    main{
-        grid-auto-rows: auto;
-        grid-template-columns: repeat(auto-fit ,minmax(13em,1fr));
-        section{
-            grid-column: unset ;
-            grid-row: unset;
-
+        main{
+            grid-template-columns: repeat(auto-fit ,minmax(14em,1fr));
+            padding: 1.3em 1em ;
         }
+}
+
+@media (max-width: 550px){
+    .jeanette-harmon, .jonathan-walters, .kira-whittle{
+                grid-column: span 2;
     }
 }