src/settings/styles/utils/helpers/_functions.scss

@@ -0,0 +1,7 @@
+@function fluid($width, $design-width) {
+	$width: calc($width / $design-width * 100);
+
+	$width: quote($width + '%');
+
+	@return unquote($width);
+}

src/template/Header/index.module.scss

@@ -1,5 +1,9 @@
+@use '../../settings/styles/utils/helpers/functions' as function;
+
 .header {
-	position: relative;
+	position: sticky;
+	top: 0;
+	left: 0;
 
 	padding: 25px 0;
 	background-color: var(--clr-common-black);
@@ -7,6 +11,10 @@
 	@media screen and (min-width: 1025px) {
 		padding: 25px 0 0;
 	}
+
+	@media screen and (min-width: 2500px) {
+		min-height: 162px;
+	}
 }
 
 .content {
@@ -16,6 +24,27 @@
 
 	padding: 0 16px;
 	margin-bottom: 27.14px;
+
+	@media screen and (min-width: 1025px) {
+		width: #{function.fluid(1080px, 1280px)};
+		padding: 0;
+		margin: 0 auto 27.14px;
+	}
+
+	@media screen and (min-width: 2500px) {
+		width: #{function.fluid(2299.68px, 2500px)};
+		margin-bottom: 22px;
+	}
+}
+
+.logo {
+	@media screen and (min-width: 1025px) {
+		width: function.fluid(136px, 1080px);
+	}
+
+	@media screen and (min-width: 2500px) {
+		width: function.fluid(265.62px, 2299.68px);
+	}
 }
 
 .search {
@@ -24,7 +53,7 @@
 	justify-content: center;
 
 	min-height: auto;
-	height: 36px;
+	min-height: 36px;
 	border: 2px solid var(--clr-gray-150);
 	border-radius: 5px;
 
@@ -32,7 +61,8 @@
 
 	input {
 		width: 100%;
-		height: 36px;
+		min-height: 36px;
+		font-size: var(--txt-normal);
 		padding: 0 9px 0 16px;
 		border-radius: 5px 0 0 5px;
 	}
@@ -47,6 +77,27 @@
 
 		background-color: var(--clr-common-white);
 	}
+	@media screen and (min-width: 1025px) {
+		button {
+			width: 50px;
+		}
+	}
+
+	@media screen and (min-width: 2500px) {
+		&,
+		input {
+			min-height: 57px;
+		}
+
+		button {
+			width: 56.85px;
+
+			img {
+				width: 35.15px;
+				height: 35.15px;
+			}
+		}
+	}
 }
 
 .actions-top,
@@ -56,6 +107,18 @@
 
 	a {
 		color: var(--clr-common-white);
+		font-size: var(--txt-normal);
+	}
+}
+
+.actions-top {
+	gap: 55px;
+
+	@media screen and (min-width: 2500px) {
+		img {
+			width: 54.68px;
+			height: 54.68px;
+		}
 	}
 }
 
@@ -68,7 +131,7 @@
 	}
 }
 
-// remove action link for small devices and added for large devices 1025 > x
+// remove action top link for small devices and added for large devices 1025 > x
 .actions-top {
 	a {
 		display: none;
@@ -92,7 +155,14 @@
 		transition: 300ms ease;
 
 		&-content {
-			width: 90%;
+			width: function.fluid(988px, 1024px);
+			height: 100vh;
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		&-content {
+			width: function.fluid(339px, 375px);
 			height: 100vh;
 		}
 	}
@@ -120,7 +190,10 @@
 
 		a {
 			margin-bottom: 12px;
+
+			font-size: var(--txt-normal);
 			font-weight: 500;
+
 			color: var(--clr-gray-400);
 		}
 	}
@@ -168,6 +241,16 @@
 	}
 }
 
+.search-top {
+	@media screen and (min-width: 1025px) {
+		width: function.fluid(264px, 1080px);
+	}
+
+	@media screen and (min-width: 2500px) {
+		width: function.fluid(515.62px, 2299.68px);
+	}
+}
+
 /*|[X]o-o-o-o[O]|*\
 |=|	SEARCH BOXS	|=|
 \*|[O]o-o-o-o[X]|*/

src/template/Header/index.tsx

@@ -1,4 +1,5 @@
 import logoImg from '../../assets/m3-logo-small.png'
+import logoMediumImg from '../../assets/m3-logo-medium.png'
 import searchIcon from '../../assets/icons/search.svg'
 import cartIcon from '../../assets/icons/minicart.svg'
 import openIcon from '../../assets/icons/hamburger.svg'
@@ -49,6 +50,10 @@ export const Header = () => {
 
 					<a className={css.logo} href="/">
 						<picture>
+							<source
+								media="(min-width:1025px)"
+								srcSet={logoMediumImg}
+							></source>
 							<img src={logoImg} alt="logo da M3 Academy" />
 						</picture>
 					</a>