From f81ae56a76fa416ae229ac0f2d1497df7188876c Mon Sep 17 00:00:00 2001
From: Daniel <info@danielvaladas.com>
Date: Mon, 8 Jul 2024 22:56:56 -0400
Subject: [PATCH] Some css and other styles adjustments (breakpoints, etc.)

---
 .../nvq-loan-calculator/nvq-loan-calculator.scss     | 12 +++++++++---
 .../nvq-loan-calculator/nvq-loan-calculator.tsx      |  7 ++++---
 src/index.html                                       |  3 ++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/nvq-loan-calculator/nvq-loan-calculator.scss b/src/components/nvq-loan-calculator/nvq-loan-calculator.scss
index a2a027d..4992fd1 100644
--- a/src/components/nvq-loan-calculator/nvq-loan-calculator.scss
+++ b/src/components/nvq-loan-calculator/nvq-loan-calculator.scss
@@ -46,7 +46,7 @@
   justify-content: center;
   align-items: stretch;
   color: var(--background-color-contrast);
-  @media (max-width: 48em){
+  @media (max-width: 62em){
     flex-direction: column;
     align-items: stretch;
     width: 100%;
@@ -55,7 +55,7 @@
   >div{
     flex: 1 0 33%;
     box-shadow: 0 16px 38px -12px var(--shadow-color);
-    @media (max-width: 48rem){
+    @media (max-width: 62rem){
       flex-basis: 100%;
       transform: scale(1);
       margin-bottom: 1em;
@@ -79,7 +79,7 @@
     color: var(--calculator-color-contrast);
     display: flex;
     flex-direction: column;
-    @media (min-width: 48em){
+    @media (min-width: 62em){
       transform: scale(1.05);
     }
     label{
@@ -172,6 +172,9 @@
     justify-content: center;
     h4{
       font-size: 1.5em;
+      @media (max-width: 62em){
+        margin: 0.25em 0;
+      }
     }
     .output{
       font-size: 3em;
@@ -179,6 +182,9 @@
     }
     .disclaimer{
       margin-top: 50%;
+      @media (max-width: 62em){
+        margin-top: 0;
+      }
       text-align: center;
     }
   }
diff --git a/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx b/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx
index b4dc329..09e85e9 100644
--- a/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx
+++ b/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx
@@ -216,14 +216,15 @@ export class NvqLoanCalculator {
         </div>
         <div class="result">
           <h4 class="text-center">{this.monthlyPaymentLabel}<sup>‡</sup></h4>
-          <span class="output">{this.calculatePayment()}$</span>
-            <p class="disclaimer mb-4"><sup>‡</sup>{this.monthlyPaymentDisclaimer}</p>
+          <span class="output">${this.calculatePayment()}</span>
+            <p class="disclaimer"><sup>‡</sup>{this.monthlyPaymentDisclaimer}</p>
         </div>
       </div>
       <slot name="footnote">
+        <hr />
         <p>
           <small>
-            <sup>*</sup> Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
+            * Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
           </small>
         </p>
       </slot>
diff --git a/src/index.html b/src/index.html
index 87a4712..7b6a56f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -81,9 +81,10 @@ <h5>Example B:</h5>
         </div>
       </div>
       <div slot="footnote">
+        <hr />
         <p>
           <small>
-            <sup>*</sup> Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
+            * Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.
           </small>
         </p>
       </div>