From 30894c0ec3bcc2450c2a28d20d1477fdd4205604 Mon Sep 17 00:00:00 2001
From: Tomasz Subik <tsubik@gmail.com>
Date: Wed, 4 Dec 2024 17:50:46 +0100
Subject: [PATCH] fix the issue with small logo in the footer on mobile screens

---
 components/layout/footer.js        | 26 +++++++++++++-------------
 css/components/layout/_footer.scss |  5 +++++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/layout/footer.js b/components/layout/footer.js
index 1424029b..5fe9d2e4 100644
--- a/components/layout/footer.js
+++ b/components/layout/footer.js
@@ -48,20 +48,20 @@ const Footer = () => {
                 <span>Phone +1(202) 729-7600</span>
                 <span>Fax: +1 (202) 720 7610</span>
               </p>
+            </div>
 
-              <div className="footer-links">
-                <Link href="/terms" prefetch={false} legacyBehavior>
-                  {intl.formatMessage({ id: 'terms.title' })}
-                </Link>
-                <span> | </span>
-                <Link href="/privacy-policy" prefetch={false} legacyBehavior>
-                  {intl.formatMessage({ id: 'Privacy Policy' })}
-                </Link>
-                <span> | </span>
-                <button type="button" onClick={handleCookiePreferencesClick} className="c-link-button">
-                  {intl.formatMessage({ id: 'Cookie Preferences' })}
-                </button>
-              </div>
+            <div className="footer-links">
+              <Link href="/terms" prefetch={false} legacyBehavior>
+                {intl.formatMessage({ id: 'terms.title' })}
+              </Link>
+              <span> | </span>
+              <Link href="/privacy-policy" prefetch={false} legacyBehavior>
+                {intl.formatMessage({ id: 'Privacy Policy' })}
+              </Link>
+              <span> | </span>
+              <button type="button" onClick={handleCookiePreferencesClick} className="c-link-button">
+                {intl.formatMessage({ id: 'Cookie Preferences' })}
+              </button>
             </div>
           </div>
         </div>
diff --git a/css/components/layout/_footer.scss b/css/components/layout/_footer.scss
index d4334f65..e16d617d 100644
--- a/css/components/layout/_footer.scss
+++ b/css/components/layout/_footer.scss
@@ -7,6 +7,7 @@
     color: $color-white;
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
   }
 
   .footer-item {
@@ -105,6 +106,8 @@
     .footer-item {
       &.wri-contact-details {
         p {
+          margin-bottom: 0;
+
           @include breakpoint(small only) {
             font-size: $font-size-small;
 
@@ -139,6 +142,8 @@
     .footer-links {
       margin-top: $space-1 * 2;
       white-space: nowrap;
+      flex-basis: 100%;
+      text-align: right;
 
       a, .c-link-button {
         color: $white;