feat(home sponsors): sponsors section optimized to reuse old code from sponsors, transition added

src/Header/Header.css

@@ -128,7 +128,8 @@ nav ul {
 }
 
 :root {
-	--fade-starts-at: 80%;
+	--fade-starts-at-bottom: 80%;
+	--fade-starts-at-top: 96%;
 	--banner-text-pos-left: 15svw;
 	--banner-text-background: white;
 }
@@ -146,12 +147,12 @@ nav ul {
 
 	-webkit-mask-image: linear-gradient(
 		to bottom,
-		black var(--fade-starts-at),
+		black var(--fade-starts-at-bottom),
 		transparent
 	);
 	mask-image: linear-gradient(
 		to bottom,
-		black var(--fade-starts-at),
+		black var(--fade-starts-at-bottom),
 		transparent
 	);
 }

src/Header/Header.js

@@ -77,7 +77,10 @@ export default function Header() {
 		const HomeBannerTop = document.getElementById("BannerHeader");
 
 		// 1svh is to gget the div close enough to the image
-		HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
+		HomeBannerTop.style.setProperty(
+			"height",
+			`calc(100svh + -${headerTopTotalHeight}px)`
+		);
 	};
 
 	return (