src/template/Footer/index.module.scss

@@ -38,11 +38,32 @@
 }
 
 .container-bottom {
-	padding-top: 15px;
-	padding-bottom: 15px;
-
 	background-color: var(--clr-common-black);
 
+	.phrase {
+		width: function.fluid(258px, 343px);
+
+		&::before {
+			content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. .';
+		}
+
+		text-overflow: ellipsis;
+		text-transform: capitalize;
+		overflow: hidden;
+
+		@media only screen and (min-width: 1025px) {
+			width: function.fluid(234px, 1080px);
+
+			&::before {
+				content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor';
+			}
+		}
+
+		@media only screen and (min-width: 2500px) {
+			width: function.fluid(467px, 2299.68px);
+		}
+	}
+
 	* p,
 	* li {
 		color: var(--clr-common-white);
@@ -50,7 +71,7 @@
 }
 
 .container-bottom {
-	.phrase,
+	.phrase::before,
 	.actions-bottom .credits li p {
 		font-size: var(--txt-xxs);
 	}
@@ -84,15 +105,16 @@
 // moved container bottom actions footer for large, medium devices
 .container-bottom {
 	.actions-bottom {
-		width: 100%;
-		height: 100%;
-
 		display: flex;
 		align-items: flex-start;
 		justify-content: center;
 		flex-direction: column;
 		gap: 15px;
 
+		width: 100%;
+		height: 100%;
+		padding: 15px 0;
+
 		@media only screen and (min-width: 1025px) {
 			flex-direction: row;
 			justify-content: space-between;
@@ -100,7 +122,6 @@
 			gap: 0;
 
 			width: function.fluid(1080px, 1280px);
-			padding: 15px 0;
 			margin: 0 auto;
 		}
 
@@ -137,6 +158,12 @@
 				color: var(--clr-primary-blue-500);
 			}
 		}
+
+		li:last-child {
+			a {
+				text-decoration: underline;
+			}
+		}
 	}
 
 	@media only screen and (min-width: 1025px) {

src/template/Footer/index.tsx

@@ -35,10 +35,7 @@ export function Footer() {
 
 			<div className={css['container-bottom']}>
 				<div className={css['actions-bottom']}>
-					<p className={css.phrase}>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-						eiusmod tempor
-					</p>
+					<p className={css.phrase}></p>
 					<PaymentsList />
 					<ul className={css.credits}>
 						<li>