implemented lazy loading and other small fixes

views/sass/_abstracts.scss

@@ -95,6 +95,7 @@ $font-type-map: (
 // using em for accessibility reasons(see: https://zellwk.com/blog/media-query-units/)
 // 1em = 16px
 $breakpoints: (
+  bp-1800: 112.5em,
   bp-1100: 68.75em,
   bp-900: 56.25em,
   bp-725: 45.32em,
@@ -105,7 +106,7 @@ $breakpoints: (
 );
 
 // mixin to handle known and unknown breakpoints:
-@mixin bp($given-breakpoint) {
+@mixin bp($given-breakpoint, $min:false) {
   // just  assigning the given value to a new variable since we're going to change it conditionally;
   $breakpoint: $given-breakpoint;
   // if $breakpoints map contains the given variable then getting it's value
@@ -113,7 +114,12 @@ $breakpoints: (
     $breakpoint: map.get($breakpoints, $breakpoint);
   }
   // and then using it for media query. This will also work for straight out values(50em or 800px, for example)
-  @media screen and (max-width: $breakpoint) {
+  $expr: 'max-width: #{$breakpoint}';
+  @if($min) {
+    $expr: 'min-width: #{$breakpoint}';
+  }
+
+  @media screen and ($expr) {
     @content;
   }
 }
@@ -160,6 +166,7 @@ $misc-variables: (
   spacer-200: 2rem,
   spacer-050: 0.5rem,
   spacer-100: 1rem,
+  spacer-150: 1.5rem,
   spacer-300: 3rem,
   spacer-500: 5rem,
   spacer-800: 8rem,
@@ -176,12 +183,12 @@ $themed-variables: (
       dark: color.scale($clr-tertiary, $lightness: -82%),
     ),
   clr-base-heading: (
-    light: darken($clr-tertiary, 9%),
-    dark: color.scale($clr-primary, $lightness: -10%, $saturation: -70%),
-  ),
-  clr-base-heading-alt-alpha: (
-    light: initial,
-    dark: initial,
+    light: color.scale($clr-tertiary, $lightness: -35%),
+    dark: $clr-primary,
+    ),
+    clr-base-heading-alt-alpha: (
+          light: color.scale($clr-tertiary, $lightness: -15%),
+      dark: color.scale($clr-secondary, $lightness: 95%),
   ),
   clr-base-text: (
     light: $clr-alpha,
@@ -239,7 +246,7 @@ $themed-variables: (
   ),
   clr-card-heading: (
     light: color.scale($clr-tertiary, $lightness: -35%),
-    dark: color.scale($clr-secondary, $lightness: 85%, $saturation: 0%),
+    dark: color.scale($clr-secondary, $lightness: 90%, $saturation: 0%),
   ),
   clr-card-heading-alt-alpha: (
     light: color.scale($clr-tertiary, $lightness: -15%),

views/sass/_base.scss

@@ -14,10 +14,6 @@ html {
   scroll-behavior: smooth;
   font-size: 62.5%;
 
-  @include bp(bp-725) {
-    font-size: 58%;
-  }
-
   @include bp(bp-350) {
     font-size: 55%;
   }

views/sass/_components.scss

@@ -356,7 +356,7 @@
 .features {
   display: grid;
   grid-template-rows: max-content auto;
-  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
   gap: var(--spacer-500);
 
   @include bp(bp-550) {

views/sass/_layout.scss

@@ -280,8 +280,10 @@
 //                           MAIN
 ////////////////////////////////////////////////////////////////
 .main {
-  // max-width: 200rem;
-  // margin-inline: auto;
+  @include bp(bp-1800, true) {
+    width: 180rem;
+    margin-inline: auto;
+  }
   padding: 2rem;
 
   @include bp(bp-450) {

views/sass/_pages.scss

@@ -31,10 +31,10 @@
 }
 
 .go-to-page {
-  margin: 3rem 5rem;
+  margin: var(--spacer-300) var(--spacer-500);
   display: grid;
   grid-auto-flow: column;
-  gap: 5rem;
+  gap: var(--spacer-500);
   place-content: center;
   place-items: center;
 
@@ -44,8 +44,8 @@
   }
 
   &__icon {
-    height: 3rem;
-    width: 3rem;
+    height: var(--fs-300);
+    width: var(--fs-300);
     fill: var(--clr-button-alt-alpha);
   }
 
@@ -68,14 +68,14 @@
 ////////////////////////////////////////////////////////////////
 .overview {
   &__nav-box {
-    padding: 5rem 2rem;
+    padding: var(--spacer-500) var(--spacer-200);
 
     @include bp(bp-725) {
-      padding: 2rem;
+      padding: var(--spacer-200);
     }
 
     @include bp(bp-550) {
-      padding: 2rem 0;
+      padding: var(--spacer-200) 0;
     }
   }
 
@@ -86,7 +86,7 @@
   }
 
   &__nav {
-    padding: 0 2rem;
+    padding: 0 var(--spacer-200);
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -94,7 +94,7 @@
     // overflow-x: scroll;
 
     @include bp(bp-725) {
-      padding: 0 1rem;
+      padding: 0 var(--spacer-100);
     }
 
     @include bp(bp-550) {
@@ -159,7 +159,7 @@
   }
 
   &__features {
-    padding: 6rem;
+    padding: var(--spacer-500);
 
     // display: grid;
     // grid-template-rows: max-content auto;
@@ -167,8 +167,8 @@
     // gap: 6rem;
     // padding: 6rem;
 
-    @include bp(bp-450) {
-      padding: 1rem;
+    @include bp(bp-550) {
+      padding: var(--spacer-100);
     }
   }
 
@@ -184,7 +184,7 @@
     max-width: 120rem;
     margin: 0 auto;
 
-    @include bp(bp-450) {
+    @include bp(bp-550) {
       padding: 5rem 1rem;
     }
   }
@@ -222,7 +222,7 @@
   &__item {
     // background-color: var(--color-secondary);
     display: grid;
-    gap: 1.5rem;
+    gap: var(--spacer-150);
   }
 
   &__item-heading {
@@ -275,7 +275,7 @@
 
   &__ways {
     text-align: center;
-    padding: 1rem;
+    padding: var(--spacer-100);
   }
 
   &__ways-image {
@@ -496,17 +496,20 @@
   &__heading-main {
     font-size: var(--fs-350);
     font-family: var(--ff-alt-alpha);
-    color: var(--clr-card-heading);
+    color: var(--clr-base-heading);
 
     @include bp(bp-900) {
-      font-size: 3rem;
+      font-size: var(--fs-300);
+    }
+    @include bp(bp-550) {
+      font-size: var(--fs-250);
     }
   }
   &__heading-sub {
     font-size: 1em;
     font-weight: 600;
     font-family: var(--ff-alt-alpha);
-    color: var(--clr-card-heading-alt-alpha);
+    color: var(--clr-base-heading-alt-alpha);
   }
 
   &__storyline,
@@ -584,11 +587,6 @@
     max-height: 30rem;
     flex: 1 0 30rem;
     max-width: 30rem;
-
-    @include bp(bp-900) {
-      max-height: 20rem;
-      flex: 1 0 20rem;
-    }
   }
   &__media-box {
     display: flex;
@@ -637,6 +635,6 @@
   }
 
   @include bp(bp-550) {
-    padding: var(--spacer-200);
+    padding-inline: var(--spacer-200);
   }
 }