fix one more report

DalaScript · DalaScript · commit a1d7912ec9f1 · 2025-09-08T17:42:33.000+04:00
diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss
@@ -27,6 +27,10 @@
     *************************/
     --fs-sm: 0.9375rem;
     --fs-md: 1.375rem;
+
+    /* || Shadow
+    *************************/
+    --shadow-light: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
 }
 
 /* || SCSS Aliases
@@ -44,4 +48,5 @@ $space-md: var(--space-md);
 $space-lg: var(--space-lg);
 
 $fs-sm: var(--fs-sm);
-$fs-md: var(--fs-md);
+$fs-md: var(--fs-md);
+$shadow-light: var(--shadow-light);
diff --git a/assets/styles/components/_card.scss b/assets/styles/components/_card.scss
@@ -6,21 +6,21 @@
     border-radius: 1.25rem;
 
     background-color: $white;
-    box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
+    box-shadow: $shadow-light;
 
     /* || Image
      *************************/
     &__img {
         width: 100%;
         height: auto;
-        border-radius: 10px;
+        border-radius: 0.625rem;
         display: block;
     }
 
     /* || Text Content
      *************************/
     &__content {
-        margin-top: $space-md;
+        margin-block-start: $space-md;
         padding: 0 $space-sm;
         text-align: center;
     }
@@ -30,7 +30,7 @@
     &__title {
         font-size: $fs-md;
         font-weight: 700;
-        line-height: 1.75rem;
+        line-height: 1.75;
         color: $dark-blue;
     }
 
@@ -41,8 +41,8 @@
 
         font-size: $fs-sm;
         font-weight: 400;
-        letter-spacing: 0.1875px;
-        line-height: 1.1875rem;
+        line-height: 1.1875;
+        letter-spacing: 0.0125em;
 
         color: $grayish-blue;
     }
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
@@ -27,6 +27,9 @@
   *************************/
   --fs-sm: 0.9375rem;
   --fs-md: 1.375rem;
+  /* || Shadow
+  *************************/
+  --shadow-light: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
 }
 
 /* || SCSS Aliases
@@ -66,7 +69,7 @@ main {
   max-width: 20rem;
   border-radius: 1.25rem;
   background-color: var(--white);
-  box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
+  box-shadow: var(--shadow-light);
   /* || Image
    *************************/
   /* || Text Content
@@ -79,25 +82,25 @@ main {
 .card__img {
   width: 100%;
   height: auto;
-  border-radius: 10px;
+  border-radius: 0.625rem;
   display: block;
 }
 .card__content {
-  margin-top: var(--space-md);
+  margin-block-start: var(--space-md);
   padding: 0 var(--space-sm);
   text-align: center;
 }
 .card__title {
   font-size: var(--fs-md);
   font-weight: 700;
-  line-height: 1.75rem;
+  line-height: 1.75;
   color: var(--dark-blue);
 }
 .card__description {
   margin-block-start: var(--space-sm);
   font-size: var(--fs-sm);
   font-weight: 400;
-  letter-spacing: 0.1875px;
-  line-height: 1.1875rem;
+  line-height: 1.1875;
+  letter-spacing: 0.0125em;
   color: var(--grayish-blue);
 }
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
     <title>QR Code Component | Frontend Mentor</title>
     <!-- Styles -->
-    <link rel="stylesheet" href="./assets/styles/styles.css">
+    <!-- <link rel="stylesheet" href="./assets/styles/styles.css"> -->
 </head>
 <body>
     <main>
