Sbit 95

src/components/BlogPage/BlogArticle/BlogArticle.scss

@@ -23,7 +23,7 @@
     justify-content: space-between;
     width: 100%;
     height: 150px;
-    padding: 0 15px;
+    padding: 0 0 0 15px;
     h1,
     h2,
     h3,

src/components/FeaturedBlogs/featuredBlogs.scss

@@ -2,6 +2,7 @@
 
 .featured {
   color: $primary;
+  margin-bottom: 3rem;
   h2 {
     margin-top: 2em;
     flex-grow: 1;
@@ -16,8 +17,10 @@
   }
 
   &-blogs {
+    align-items: center;
     img {
       object-fit: cover;
+      max-width: 140px;
     }
 
     display: flex;
@@ -29,6 +32,7 @@
 
     .article {
       &__container {
+        color: $black;
         margin: 0.5em;
         background-color: #efefef;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -38,22 +42,27 @@
           text-align: left;
           font-weight: 700;
           font-size: 18px !important;
-
         }
       }
-      &__link{
-        button{
+      &__link {
+        button {
           background: none;
           color: $secondary;
           text-decoration: underline;
           padding: 0;
-          margin: 0 0 1em 0;
+          margin: 0;
         }
       }
     }
 
     @media screen and (max-width: $breakpoint-lg) {
       flex-direction: column;
     }
+
+    @media screen and (min-width: $breakpoint-lg) {
+      img {
+        max-width: 100%;
+      }
+    }
   }
 }

src/components/expandGrid/expandGrid.scss

@@ -1,7 +1,5 @@
 @import ".././../styles/global.scss";
-
 .expandGrid {
-
   color: $primary;
   display: flex;
   flex-direction: column;
@@ -22,14 +20,12 @@
     font-weight: 400;
   }
 }
-
 .staggered-list-content {
   margin-top: 3em;
   width: 100%;
   display: flex;
   justify-content: center;
 }
-
 .list {
   list-style-type: none;
   display: flex;
@@ -38,7 +34,6 @@
   padding: 0 2em;
   width: 100%;
 }
-
 .listItem {
   border-radius: 8px;
   margin: 5px;
@@ -48,27 +43,23 @@
   }
   background-color: $primary-container;
   cursor: pointer;
-
   @media screen and (max-width: $breakpoint-xxl) {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-
-  @media screen and (max-width: $breakpoint-md) {
+  @media screen and (max-width: calc($breakpoint-md - 2px)) {
     flex: 0 1 100%;
   }
-
   &-expanded {
     @extend .listItem;
     flex-basis: 100%;
   }
 }
-
 .listItemContent {
   display: flex;
   flex-direction: row;
   height: 100%;
   position: relative;
-  @media screen and (max-width: $breakpoint-md) {
+  @media screen and (max-width: calc($breakpoint-md - 2px)) {
     flex-direction: column;
     align-items: unset;
   }
@@ -84,38 +75,33 @@
   aspect-ratio: 1/1;
   margin: 0;
   border-radius: 8px;
-
   &-expanded {
     @extend .avatar;
     box-shadow: 0px 4px 4px 0px #00000040;
-
     flex-grow: 0;
     margin-right: 0;
     min-width: 33%;
     max-width: 33%;
-    @media screen and (max-width: $breakpoint-md) {
+    @media screen and (max-width: calc($breakpoint-md - 2px)) {
       min-width: 100%;
       max-width: 100%;
       height: 400px;
       object-fit: cover;
     }
-    @media screen and (max-width: $breakpoint-md) {
+    @media screen and (max-width: calc($breakpoint-md - 2px)) {
       height: unset;
       object-fit: unset;
     }
   }
 }
-
 .expandedListItem .description {
   display: flex;
   flex-direction: column;
 }
-
 .expandedListItem {
   cursor: pointer;
-  background-color: #d0d0d0;
+  background-color: #D0D0D0;
 }
-
 .additional-content {
   box-shadow: 0px 4px 4px 0px #00000040;
   width: 100%;
@@ -124,8 +110,6 @@
     margin: 0;
   }
 }
-
-
 .listItem-more {
   position: absolute;
   inset: 0 0 20px 20px;
@@ -148,7 +132,6 @@
     }
   }
 }
-
 .additional-content > div {
   opacity: 0;
   border-radius: 3px;
@@ -168,7 +151,6 @@
     text-align: left;
   }
 }
-
 /* content fade in animations */
 @keyframes fadeIn {
   0% {
@@ -179,7 +161,6 @@
     opacity: 1;
   }
 }
-
 .animated-in .additional-content > div {
   animation: fadeIn 0.4s forwards;
-}
+}

src/components/videoBackground/VideoBackground.js

@@ -35,7 +35,7 @@ const VideoBackground = ({
     <div
       className={`${backgroundImage && "pt-5"} pb-3`}
       style={{
-        backgroundImage: `url(${backgroundImage?.url})`,
+        backgroundImage: `url(${backgroundImage?.url})`, backgroundRepeatY: 'no-repeat',
       }}
     >
       <div