diff --git a/frontend/components/alerts/AlertsListEmpty/styles.module.css b/frontend/components/alerts/AlertsListEmpty/styles.module.css
index e0a42a1b..e1ab27ed 100644
--- a/frontend/components/alerts/AlertsListEmpty/styles.module.css
+++ b/frontend/components/alerts/AlertsListEmpty/styles.module.css
@@ -4,14 +4,14 @@
 .container {
 	display: flex;
 	flex-direction: column;
+	gap: var(--size-spacing-10);
 	align-items: center;
 	justify-content: center;
-	gap: var(--size-spacing-10);
 	padding: 0 var(--size-spacing-20) var(--size-spacing-40);
-	text-align: center;
 	font-weight: var(--font-weight-medium);
 	line-height: 1.3;
 	color: var(--color-system-text-300);
+	text-align: center;
 }
 
 /* * */
@@ -35,13 +35,13 @@
 .actionWrapper {
 	display: flex;
 	flex-direction: row;
+	gap: var(--size-spacing-20);
 	align-items: center;
 	justify-content: center;
-	gap: var(--size-spacing-20);
 	margin-top: var(--size-spacing-20);
 }
 
-@media screen and (max-width: 600px) {
+@media (width <= 600px) {
 	.actionWrapper {
 		flex-direction: column;
 	}
diff --git a/frontend/components/alerts/AlertsListToolbar/styles.module.css b/frontend/components/alerts/AlertsListToolbar/styles.module.css
index e4ee1bec..4d85863c 100644
--- a/frontend/components/alerts/AlertsListToolbar/styles.module.css
+++ b/frontend/components/alerts/AlertsListToolbar/styles.module.css
@@ -9,15 +9,15 @@
 
 .selectsWrapper {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
 	grid-template-rows: 1fr;
+	grid-template-columns: 1fr 1fr;
 	gap: var(--size-spacing-15);
 	justify-content: stretch;
 	width: 100%;
 }
 
 
-@media screen and (width <= 768px) {
+@media (width <= 768px) {
 	.selectsWrapper {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/cards/Discounts/styles.module.css b/frontend/components/cards/Discounts/styles.module.css
index f386e39b..3f0a9e4c 100644
--- a/frontend/components/cards/Discounts/styles.module.css
+++ b/frontend/components/cards/Discounts/styles.module.css
@@ -9,7 +9,7 @@
 	padding: var(--size-spacing-30);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container {
 		grid-template-columns: 1fr;
 	}
@@ -60,14 +60,14 @@
 	text-align: center;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.pricing {
 		padding-top: var(--size-spacing-30);
 		border-top: 1px dashed var(--color-system-border-100);
 	}
 }
 
-@media screen and (width <= 700px) {
+@media (width <= 700px) {
 	.pricing {
 		flex-wrap: wrap;
 	}
diff --git a/frontend/components/cards/MunicipalDiscounts/styles.module.css b/frontend/components/cards/MunicipalDiscounts/styles.module.css
index 8ef4a56c..7b98fc1c 100644
--- a/frontend/components/cards/MunicipalDiscounts/styles.module.css
+++ b/frontend/components/cards/MunicipalDiscounts/styles.module.css
@@ -13,7 +13,7 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
     .cardWrapper {
         flex-direction: column;
     }
@@ -33,8 +33,8 @@
 }
 
 .validity{
+	padding-top: var(--size-spacing-5);
     font-size: 12px;
     font-weight: var(--font-weight-medium);
     color: var(--color-system-text-300);
-	padding-top: var(--size-spacing-5);
 }
\ No newline at end of file
diff --git a/frontend/components/cards/Pass/styles.module.css b/frontend/components/cards/Pass/styles.module.css
index f1678bcd..cd336000 100644
--- a/frontend/components/cards/Pass/styles.module.css
+++ b/frontend/components/cards/Pass/styles.module.css
@@ -14,7 +14,7 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/common/SelectOperationalDay/styles.module.css b/frontend/components/common/SelectOperationalDay/styles.module.css
index 038caa55..3cecf3eb 100644
--- a/frontend/components/common/SelectOperationalDay/styles.module.css
+++ b/frontend/components/common/SelectOperationalDay/styles.module.css
@@ -16,7 +16,7 @@
 	padding: 0;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.segmentedControlDateInputOverrideControl label {
 		padding-right: var(--size-spacing-15);
 		padding-left: var(--size-spacing-15);
@@ -24,7 +24,7 @@
 	}
 }
 
-@media screen and (width <= 350px) {
+@media (width <= 350px) {
 	.segmentedControlDateInputOverrideControl label,
 	.segmentedControlDateInputOverrideControl:last-child label {
 		padding-top: var(--size-spacing-15);
@@ -58,7 +58,7 @@
 	color: var(--color-system-text-100);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.datePickerInput {
 		padding-left: calc(var(--size-spacing-15) + 26px);
 		font-size: 14px;
@@ -87,7 +87,7 @@
 	color: var(--color-system-text-200);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.datePickerSection svg {
 		width: 20px;
 	}
diff --git a/frontend/components/header/Header/styles.module.css b/frontend/components/header/Header/styles.module.css
index d67d06b1..e6e580fd 100644
--- a/frontend/components/header/Header/styles.module.css
+++ b/frontend/components/header/Header/styles.module.css
@@ -25,7 +25,7 @@
 	transform: translate(-20px, 0);
 }
 
-@media screen and (width <= 1200px) {
+@media (width <= 1200px) {
 	.container.isSticky {
 		border-color: transparent;
 		border-bottom-color: var(--color-system-border-100);
@@ -33,7 +33,7 @@
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container,
 	.container.isSticky {
 		width: 100%;
diff --git a/frontend/components/helpdesks/Header/styles.module.css b/frontend/components/helpdesks/Header/styles.module.css
index 4f464d14..7646ab1e 100644
--- a/frontend/components/helpdesks/Header/styles.module.css
+++ b/frontend/components/helpdesks/Header/styles.module.css
@@ -13,12 +13,12 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
+		gap: 0;
 		border: none;
 		border-radius: 0;
-		gap: 0;
 	}
 }
 
@@ -28,7 +28,7 @@
 	padding: var(--size-spacing-15);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.cardImage {
 		height: 100px;
 	}
diff --git a/frontend/components/helpdesks/ServicePointsFilters/styles.module.css b/frontend/components/helpdesks/ServicePointsFilters/styles.module.css
index cedbc140..afd3ddea 100644
--- a/frontend/components/helpdesks/ServicePointsFilters/styles.module.css
+++ b/frontend/components/helpdesks/ServicePointsFilters/styles.module.css
@@ -1,24 +1,24 @@
 .content {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: 1rem;
+    grid-gap: var(--size-spacing-5);
 }
 
 .validity{
-    color: var(--color-system-text-300);
     font-size: 10px;
+    font-style: semibold;
     font-weight: 600;
-    font-style: SemiBold;
+    color: var(--color-system-text-300);
     text-align: left;
 }
 
 .images {
     display: flex;
+    gap: var(--size-spacing-5);
     align-items: center;
     justify-content: center;
-    gap: 1rem;
-    height: 100px;
     width: 100px;
+    height: 100px;
 
     & img {
         height: 100%;
@@ -27,25 +27,25 @@
 
 .cardAlt {
     display: flex;
-    align-items: center;
     flex-direction: row;
-    gap: 1rem;
+    gap: var(--size-spacing-5);
+    align-items: center;
 
     & img {
         height: 80px;
     }
 }
 
-@media screen and (max-width: 768px) {
+@media (width <= 768px) {
     .content {
         grid-template-columns: 1fr;
     }
 
     .card {
         display: flex;
-        align-items: center;
         flex-direction: row;
-        gap: 1rem;
+        gap: var(--size-spacing-5);)
+        align-items: center;
 
         & img {
             height: 80px;
diff --git a/frontend/components/helpdesks/WhereToBuy/styles.module.css b/frontend/components/helpdesks/WhereToBuy/styles.module.css
index f4b1fd68..e0d4c00f 100644
--- a/frontend/components/helpdesks/WhereToBuy/styles.module.css
+++ b/frontend/components/helpdesks/WhereToBuy/styles.module.css
@@ -15,11 +15,11 @@
 }
 
 a.cardWrapper:hover {
-	border-color: var(--color-system-border-200);
 	background-color: var(--color-system-background-200);
+	border-color: var(--color-system-border-200);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/home/SchedulesSection/styles.module.css b/frontend/components/home/SchedulesSection/styles.module.css
index 23b7a3e9..fa63c474 100644
--- a/frontend/components/home/SchedulesSection/styles.module.css
+++ b/frontend/components/home/SchedulesSection/styles.module.css
@@ -5,13 +5,13 @@
 	grid-template-columns: repeat(4, 1fr);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.gridNav {
 		grid-template-columns: 1fr 1fr;
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.gridNav {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/home/SupportSection/styles.module.css b/frontend/components/home/SupportSection/styles.module.css
index d6406531..26d55caa 100644
--- a/frontend/components/home/SupportSection/styles.module.css
+++ b/frontend/components/home/SupportSection/styles.module.css
@@ -5,7 +5,7 @@
 	grid-template-columns: repeat(2, 1fr);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.gridNav {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/home/TarifsSection/styles.module.css b/frontend/components/home/TarifsSection/styles.module.css
index 85772796..faf73b0f 100644
--- a/frontend/components/home/TarifsSection/styles.module.css
+++ b/frontend/components/home/TarifsSection/styles.module.css
@@ -5,13 +5,13 @@
 	grid-template-columns: 1fr 1fr 1fr;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.gridNav {
 		grid-template-columns: 1fr 1fr;
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.gridNav {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/layout/Grid/styles.module.css b/frontend/components/layout/Grid/styles.module.css
index b2094a63..d7a69359 100644
--- a/frontend/components/layout/Grid/styles.module.css
+++ b/frontend/components/layout/Grid/styles.module.css
@@ -71,7 +71,7 @@
 	grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container.aab {
 		grid-template-columns: 1fr 1fr;
 	}
@@ -89,7 +89,7 @@
 	}
 }
 
-@media screen and (width <= 900px) {
+@media (width <= 900px) {
 	.container.aab {
 		grid-template-columns: 1fr;
 	}
@@ -107,7 +107,7 @@
 	}
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.abc {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/layout/GridNav/styles.module.css b/frontend/components/layout/GridNav/styles.module.css
index a572a76b..4c9bce5c 100644
--- a/frontend/components/layout/GridNav/styles.module.css
+++ b/frontend/components/layout/GridNav/styles.module.css
@@ -3,15 +3,15 @@
 
 .container {
 	display: grid;
-	grid-template-columns: repeat(4, 1fr);
 	grid-template-rows: 1fr;
+	grid-template-columns: repeat(4, 1fr);
 	gap: var(--size-spacing-20);
 	width: 100%;
 	padding: var(--size-spacing-20);
 	padding-top: 0;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container {
 		display: flex;
 		flex-direction: column;
diff --git a/frontend/components/layout/GridNavItem/styles.module.css b/frontend/components/layout/GridNavItem/styles.module.css
index 8f5f15dd..1e7b4eb9 100644
--- a/frontend/components/layout/GridNavItem/styles.module.css
+++ b/frontend/components/layout/GridNavItem/styles.module.css
@@ -26,7 +26,7 @@
 	border-color: var(--color-system-border-300);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container,
 	.container:hover,
 	.container:active {
diff --git a/frontend/components/layout/RegularListItem/styles.module.css b/frontend/components/layout/RegularListItem/styles.module.css
index 9b3540b9..2ddd635b 100644
--- a/frontend/components/layout/RegularListItem/styles.module.css
+++ b/frontend/components/layout/RegularListItem/styles.module.css
@@ -27,7 +27,7 @@
 	border-bottom: none;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container,
 	.container:hover,
 	.container:active {
diff --git a/frontend/components/layout/Section/index.tsx b/frontend/components/layout/Section/index.tsx
index 47219024..bea50d3a 100644
--- a/frontend/components/layout/Section/index.tsx
+++ b/frontend/components/layout/Section/index.tsx
@@ -16,14 +16,26 @@ interface Props {
 	variant?: 'default' | 'muted' | 'standout' | 'success' | 'warning'
 	withBottomDivider?: boolean
 	withGap?: boolean
-	withPadding?: boolean
+	withPadding?: 'desktop' | 'mobile' | boolean
 }
 
 /* * */
 
 export function Section({ children, heading, href, subheading, target, variant = 'default', withBottomDivider, withGap, withPadding }: Props) {
+	//
+
+	//
+	// A. Transform data
+
+	//
+	// B. Render components
+
 	return (
-		<section className={`${styles.container} ${withBottomDivider && styles.withBottomDivider} ${withGap && styles.withGap} ${withPadding && styles.withPadding} ${styles[variant]}`}>
+		<section
+			className={`${styles.container} ${withBottomDivider && styles.withBottomDivider} ${withGap && styles.withGap} ${styles[variant]}`}
+			data-with-padding-desktop={withPadding === 'desktop' || withPadding === true}
+			data-with-padding-mobile={withPadding === 'mobile' || withPadding === true}
+		>
 
 			{(heading || subheading) && (
 				<div className={styles.headingWrapper}>
@@ -46,4 +58,6 @@ export function Section({ children, heading, href, subheading, target, variant =
 
 		</section>
 	);
+
+	//
 }
diff --git a/frontend/components/layout/Section/styles.module.css b/frontend/components/layout/Section/styles.module.css
index c567104d..87c75a03 100644
--- a/frontend/components/layout/Section/styles.module.css
+++ b/frontend/components/layout/Section/styles.module.css
@@ -28,10 +28,6 @@
 	padding-left: var(--size-spacing-25);
 }
 
-.withPadding .headingWrapper {
-	padding-bottom: unset;
-}
-
 /* * */
 /* HEADING */
 
@@ -92,10 +88,27 @@
 /* * */
 /* CHILDREN WRAPPER / MODIFIERS */
 
-.withPadding .childrenWrapper  {
-	padding: var(--size-spacing-20);
-}
-
 .withGap .childrenWrapper  {
 	gap: var(--size-spacing-15);
+}
+
+/* * */
+/* MODIFIERS / WITH PADDING */
+
+@media (width <= 650px) {
+	.container[data-with-padding-mobile='true'] .headingWrapper {
+		padding-bottom: unset;
+	}
+	.container[data-with-padding-mobile='true'] .childrenWrapper  {
+		padding: var(--size-spacing-20);
+	}
+}
+
+@media (width > 650px) {
+	.container[data-with-padding-desktop='true'] .headingWrapper {
+		padding-bottom: unset;
+	}
+	.container[data-with-padding-desktop='true']  .childrenWrapper  {
+		padding: var(--size-spacing-20);
+	}
 }
\ No newline at end of file
diff --git a/frontend/components/layout/Surface/styles.module.css b/frontend/components/layout/Surface/styles.module.css
index e4ab4377..bf0d0f03 100644
--- a/frontend/components/layout/Surface/styles.module.css
+++ b/frontend/components/layout/Surface/styles.module.css
@@ -8,7 +8,7 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container {
 		border-radius: unset;
 	}
@@ -34,7 +34,7 @@
 	border-radius: calc(var(--border-radius-lg) + 1px);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.default {
 		background-color: var(--color-system-background-200);
 		border: none;
@@ -51,7 +51,7 @@
 	border-radius: calc(var(--border-radius-lg) + 1px);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.persistent {
 		border-right: none;
 		border-left: none;
@@ -68,7 +68,7 @@
 	border-radius: calc(var(--border-radius-lg) + 1px);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.alerts {
 		border-right: none;
 		border-left: none;
@@ -93,7 +93,7 @@
 	border-radius: calc(var(--border-radius-lg) + 5px);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 
 	/* stylelint-disable-next-line selector-class-pattern */
 	.container.brand2 {
@@ -110,7 +110,7 @@
 	border-radius: calc(var(--border-radius-lg) + 1px);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.debug {
 		border-radius: unset;
 	}
@@ -131,7 +131,7 @@
 	animation: pulse-animation-warning 3000ms ease-out infinite;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.warning {
 		border:none;
 		border-top: 5px solid #FF6900;
@@ -168,7 +168,7 @@
 	border: 3px solid #2d7523; */
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.success {
 		border:none;
 		border-top: 5px solid #5dba50;
@@ -240,7 +240,7 @@
 	border-radius: calc(var(--border-radius-lg) - var(--border-size));
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container.standout,
 	.container.standout .inner {
 		margin-right: 0;
diff --git a/frontend/components/lines/LinesDetailHeader/styles.module.css b/frontend/components/lines/LinesDetailHeader/styles.module.css
index 1e6e0dfc..810226cb 100644
--- a/frontend/components/lines/LinesDetailHeader/styles.module.css
+++ b/frontend/components/lines/LinesDetailHeader/styles.module.css
@@ -49,7 +49,7 @@
 	width: 100%;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 
 	.container {
 		grid-template-columns: 1fr;
@@ -63,7 +63,7 @@
 	justify-self: flex-end;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 
 	.patternSelectorExplainerWrapper {
 		margin-top: var(--size-spacing-20);
diff --git a/frontend/components/lines/LinesDetailPath/styles.module.css b/frontend/components/lines/LinesDetailPath/styles.module.css
index d6734426..a2b79895 100644
--- a/frontend/components/lines/LinesDetailPath/styles.module.css
+++ b/frontend/components/lines/LinesDetailPath/styles.module.css
@@ -10,7 +10,7 @@
 	width: 100%;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container {
 		grid-template:
 			"b" 50vh [b_]
@@ -30,7 +30,7 @@
 	border-left: 1px solid var(--color-system-border-100);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.mapWrapper {
 		position: static;
 		border: none;
diff --git a/frontend/components/map/MapView/styles.module.css b/frontend/components/map/MapView/styles.module.css
index d444f93a..18d0c697 100644
--- a/frontend/components/map/MapView/styles.module.css
+++ b/frontend/components/map/MapView/styles.module.css
@@ -16,7 +16,7 @@
 	padding: var(--size-spacing-10);
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.toolbar {
 		padding: var(--size-spacing-20);
 		background-color: var(--color-system-background-100);
diff --git a/frontend/components/news/NewsDetail/styles.module.css b/frontend/components/news/NewsDetail/styles.module.css
index ab619954..bd899795 100644
--- a/frontend/components/news/NewsDetail/styles.module.css
+++ b/frontend/components/news/NewsDetail/styles.module.css
@@ -8,7 +8,7 @@
 	width: 100%;
 }
 
-@media screen and (width <= 900px) {
+@media (width <= 900px) {
 	.innerWrapper {
 		grid-template:
 			"b" auto [b_]
diff --git a/frontend/components/news/NewsDetailSidebar/styles.module.css b/frontend/components/news/NewsDetailSidebar/styles.module.css
index 50d159b3..ad2ec6f9 100644
--- a/frontend/components/news/NewsDetailSidebar/styles.module.css
+++ b/frontend/components/news/NewsDetailSidebar/styles.module.css
@@ -8,8 +8,8 @@
 	color: var(--color-system-text-300);
 
 	& ul {
-		list-style: none;
 		padding-inline-start: 20px;
+		list-style: none;
 	}
 
 	& li {
@@ -18,10 +18,10 @@
 
 	/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 	& :global(ul) {
-		margin: 5px 0;
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
+		margin: 5px 0;
 	}
 }
 
@@ -30,7 +30,7 @@
 }
 
 
-@media screen and (max-width: 900px) {
+@media (width <= 900px) {
 	.nav {
 		display: none;
 	}
diff --git a/frontend/components/periods/PeriodsWidget/styles.module.css b/frontend/components/periods/PeriodsWidget/styles.module.css
index 51b25904..8c66129c 100644
--- a/frontend/components/periods/PeriodsWidget/styles.module.css
+++ b/frontend/components/periods/PeriodsWidget/styles.module.css
@@ -12,7 +12,7 @@
 	overflow-x: auto;
 }
 
-@media screen and (width <= 800px) {
+@media (width <= 800px) {
 	.container {
 		padding-right: 30px;
 	}
@@ -29,7 +29,7 @@
 	border-radius: 999px;
 }
 
-@media screen and (width <= 800px) {
+@media (width <= 800px) {
 	.divider {
 		min-width: 50vw;
 	}
diff --git a/frontend/components/review-2024/Review2024Card/styles.module.css b/frontend/components/review-2024/Review2024Card/styles.module.css
index 8c14ebf4..9d279729 100644
--- a/frontend/components/review-2024/Review2024Card/styles.module.css
+++ b/frontend/components/review-2024/Review2024Card/styles.module.css
@@ -39,7 +39,7 @@
 	align-items: center;
 	justify-content: space-between;
 	width: 100%;
-	padding: 20px 15px;
+	padding: 20px;
 	padding-bottom: 40px;
 	cursor: pointer;
 	background-color: var(--color-primary);
@@ -75,7 +75,7 @@
 
 .container[data-is-last='true'][data-open='false'] .header {
 	border-radius: 18px;
-	transition: all 50ms ease-out calc(var(--animation-duration-close) - 100ms);
+	transition: all 100ms ease-out calc(var(--animation-duration-close) - 50ms);
 }
 
 /* * */
diff --git a/frontend/components/review-2024/Review2024LevelOne/index.tsx b/frontend/components/review-2024/Review2024LevelOne/index.tsx
index e573f3a4..850da128 100644
--- a/frontend/components/review-2024/Review2024LevelOne/index.tsx
+++ b/frontend/components/review-2024/Review2024LevelOne/index.tsx
@@ -26,19 +26,27 @@ export function Review2024LevelOne() {
 	return (
 		<Surface forceOverflow>
 			<Grid columns="abc">
-				<Section withGap withPadding>
-					<h2 className={styles.heading}>{t('a.heading')}</h2>
-					<h5 className={styles.subheading}>{t('a.subheading')}</h5>
+
+				<Section withPadding="desktop" withGap>
+					<div className={styles.headingWrapper}>
+						<h2 className={styles.heading}>{t('a.heading')}</h2>
+						<h5 className={styles.subheading}>{t('a.subheading')}</h5>
+					</div>
 					<Review2024CardGroup groupId="passageiros" />
 				</Section>
-				<Section withGap withPadding>
-					<h2 className={styles.heading}>{t('b.heading')}</h2>
-					<h5 className={styles.subheading}>{t('b.subheading')}</h5>
+
+				<Section withPadding="desktop" withGap>
+					<div className={styles.headingWrapper}>
+						<h2 className={styles.heading}>{t('b.heading')}</h2>
+						<h5 className={styles.subheading}>{t('b.subheading')}</h5>
+					</div>
 					<Review2024CardGroup groupId="passageiros" />
 				</Section>
-				<Section withGap withPadding>
-					<h2 className={styles.heading}>{t('c.heading')}</h2>
-					<h5 className={styles.subheading}>{t('c.subheading')}</h5>
+				<Section withPadding="desktop" withGap>
+					<div className={styles.headingWrapper}>
+						<h2 className={styles.heading}>{t('c.heading')}</h2>
+						<h5 className={styles.subheading}>{t('c.subheading')}</h5>
+					</div>
 					<Review2024CardGroup groupId="passageiros" />
 				</Section>
 			</Grid>
diff --git a/frontend/components/review-2024/Review2024LevelOne/styles.module.css b/frontend/components/review-2024/Review2024LevelOne/styles.module.css
index 6fe883c0..002ad088 100644
--- a/frontend/components/review-2024/Review2024LevelOne/styles.module.css
+++ b/frontend/components/review-2024/Review2024LevelOne/styles.module.css
@@ -1,6 +1,23 @@
 /* * */
 /* HEADINGS */
 
+.headingWrapper {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-spacing-5);
+	align-items: flex-start;
+	justify-content: flex-start;
+	width: 100%;
+}
+
+@media (width <= 650px) {
+	.headingWrapper {
+		padding: var(--size-spacing-20);
+		padding-bottom: 0;
+		padding-left: var(--size-spacing-25);
+	}
+}
+
 .heading {
 	font-size: 20px;
 	font-weight: var(--font-weight-semibold);
diff --git a/frontend/components/stops/StopsDetailContent/styles.module.css b/frontend/components/stops/StopsDetailContent/styles.module.css
index 14b0d976..ef43704d 100644
--- a/frontend/components/stops/StopsDetailContent/styles.module.css
+++ b/frontend/components/stops/StopsDetailContent/styles.module.css
@@ -10,7 +10,7 @@
 	width: 100%;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container {
 		grid-template:
 			"a" 50vh [a_]
@@ -41,7 +41,7 @@
 	max-height: calc(100vh - var(--size-height-header));;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.mapWrapper {
 		position: static;
 	}
diff --git a/frontend/components/stops/StopsDetailContentTimetable/styles.module.css b/frontend/components/stops/StopsDetailContentTimetable/styles.module.css
index e7bd5582..0746d302 100644
--- a/frontend/components/stops/StopsDetailContentTimetable/styles.module.css
+++ b/frontend/components/stops/StopsDetailContentTimetable/styles.module.css
@@ -8,7 +8,7 @@
 	padding: var(--size-spacing-15);
 }
 
-@media screen and (width < 1000px){
+@media (width < 1000px){
 	.container{
 		gap: var(--size-spacing-10);
 	}
diff --git a/frontend/components/stops/StopsDetailContentTimetableHeader/styles.module.css b/frontend/components/stops/StopsDetailContentTimetableHeader/styles.module.css
index 421e683e..5730c3ab 100644
--- a/frontend/components/stops/StopsDetailContentTimetableHeader/styles.module.css
+++ b/frontend/components/stops/StopsDetailContentTimetableHeader/styles.module.css
@@ -23,7 +23,7 @@
 	box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container {
 		border-radius: unset;
 	}
diff --git a/frontend/components/stops/StopsDetailContentTimetableRow/styles.module.css b/frontend/components/stops/StopsDetailContentTimetableRow/styles.module.css
index 1562dcd6..15ee2f46 100644
--- a/frontend/components/stops/StopsDetailContentTimetableRow/styles.module.css
+++ b/frontend/components/stops/StopsDetailContentTimetableRow/styles.module.css
@@ -43,7 +43,7 @@
 	}
 }
 
-@media screen and (width < 650px) {
+@media (width < 650px) {
 	.container {
 		border-bottom: unset;
 		border-radius: 15px;
diff --git a/frontend/components/stops/StopsDetailHeader/styles.module.css b/frontend/components/stops/StopsDetailHeader/styles.module.css
index cd8ff0c8..a42784d8 100644
--- a/frontend/components/stops/StopsDetailHeader/styles.module.css
+++ b/frontend/components/stops/StopsDetailHeader/styles.module.css
@@ -67,7 +67,7 @@
 	overflow: auto;
 }
 
-@media screen and (width <= 768px) {
+@media (width <= 768px) {
 	.iconsWrapper {
 		overflow: auto;
 	}
diff --git a/frontend/components/stores/StoresList/styles.module.css b/frontend/components/stores/StoresList/styles.module.css
index c19ac80f..b75f8c94 100644
--- a/frontend/components/stores/StoresList/styles.module.css
+++ b/frontend/components/stores/StoresList/styles.module.css
@@ -10,7 +10,7 @@
 	width: 100%;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.contentWrapper {
 		grid-template:
 			"b" 300px [b_]
@@ -40,7 +40,7 @@
 	max-height: calc(100vh - var(--size-height-header));
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.mapWrapper {
 		position: static;
 		height: 300px;
diff --git a/frontend/components/tickets/Pricing/styles.module.css b/frontend/components/tickets/Pricing/styles.module.css
index 33ab80f0..1a6a67d1 100644
--- a/frontend/components/tickets/Pricing/styles.module.css
+++ b/frontend/components/tickets/Pricing/styles.module.css
@@ -9,7 +9,7 @@
 	padding: var(--size-spacing-30);
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.container {
 		grid-template-columns: 1fr;
 	}
@@ -27,7 +27,7 @@
 	width: 100%;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.info {
 		align-items: center;
 	}
@@ -56,14 +56,14 @@
 	text-align: center;
 }
 
-@media screen and (width < 1000px) {
+@media (width < 1000px) {
 	.pricing {
 		padding-top: var(--size-spacing-30);
 		border-top: 1px dashed var(--color-system-border-100);
 	}
 }
 
-@media screen and (width <= 700px) {
+@media (width <= 700px) {
 	.pricing {
 		flex-wrap: wrap;
 	}
diff --git a/frontend/components/tickets/TicketsHeader/styles.module.css b/frontend/components/tickets/TicketsHeader/styles.module.css
index 15a8ea7d..1ddf46bf 100644
--- a/frontend/components/tickets/TicketsHeader/styles.module.css
+++ b/frontend/components/tickets/TicketsHeader/styles.module.css
@@ -13,7 +13,7 @@
 	border-radius: var(--border-radius-lg);
 }
 
-@media screen and (width <= 500px) {
+@media (width <= 500px) {
 	.cardWrapper {
 		grid-template-columns: 1fr;
 	}
diff --git a/frontend/components/viewport/WebsiteViewport/styles.module.css b/frontend/components/viewport/WebsiteViewport/styles.module.css
index 3c41e239..034481d9 100644
--- a/frontend/components/viewport/WebsiteViewport/styles.module.css
+++ b/frontend/components/viewport/WebsiteViewport/styles.module.css
@@ -10,7 +10,7 @@
 	margin: auto;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.container {
 		padding: 0;
 		margin-top: -20px;
diff --git a/frontend/themes/_default/overrides/SegmentedControl.module.css b/frontend/themes/_default/overrides/SegmentedControl.module.css
index ab1bccda..92dba867 100644
--- a/frontend/themes/_default/overrides/SegmentedControl.module.css
+++ b/frontend/themes/_default/overrides/SegmentedControl.module.css
@@ -11,7 +11,7 @@
 	background-color: rgb(255 255 255 / 50%);
 }
 
-@media screen and (width <= 350px) {
+@media (width <= 350px) {
 	.root {
 		flex-direction: column;
 	}
@@ -30,7 +30,7 @@
 	justify-content: center;
 }
 
-@media screen and (width <= 350px) {
+@media (width <= 350px) {
 	.control::before {
 		width: 100%;
 		height: 1px;
@@ -65,7 +65,7 @@
 	transition: all 300ms ease;
 }
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
 	.label {
 		font-size: 14px;
 	}
diff --git a/frontend/themes/_default/styles/variables.css b/frontend/themes/_default/styles/variables.css
index 18d4a2a2..437cd375 100644
--- a/frontend/themes/_default/styles/variables.css
+++ b/frontend/themes/_default/styles/variables.css
@@ -170,10 +170,10 @@
 		--color-system-background-300: rgb(10 10 20);
 		--color-system-border-100: rgb(60 60 65);
 		--color-system-border-200: rgb(80 80 85);
-		--color-system-text-100: rgb(255, 255, 255);
-		--color-system-text-200: rgb(200, 200, 210);
-		--color-system-text-300: rgb(150, 150, 165);
-		--color-system-text-400: rgb(100, 100, 110);
+		--color-system-text-100: rgb(255 255 255);
+		--color-system-text-200: rgb(200 200 210);
+		--color-system-text-300: rgb(150 150 165);
+		--color-system-text-400: rgb(100 100 110);
 
 		/* * */
 		/* COLOR / STATUS */
@@ -252,7 +252,7 @@ breakpoint-mobile {
 
 /* * */
 
-@media screen and (width <= 650px) {
+@media (width <= 650px) {
   :root {
 
 		/* * */