fix book club page on mobile

assets/css/static.css

@@ -26,6 +26,11 @@ body {
   max-width: 908px;
   margin-inline: auto;
 }
+@media (max-width: 480px) {
+  .container {
+    padding: 3rem;
+  }
+}
 
 a {
   color: var(--foreground-text);
@@ -34,6 +39,7 @@ a {
 h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
   font-size: 38px;
+  line-height: 1;
 }
 
 .btn {
@@ -64,6 +70,13 @@ h2 {
   text-transform: uppercase;
   align-items: center;
 }
+@media (max-width: 480px) {
+  .site-navigation {
+    flex-direction: column;
+    padding-top: 3rem;
+    gap: 2rem;
+  }
+}
 .site-navigation ul.pages-list {
   display: flex;
   justify-content: space-between;
@@ -83,26 +96,43 @@ section {
   padding-block: 82px;
 }
 
-.hero--container {
+section.hero {
+  padding-block: 0;
+}
+section.hero .hero--container {
   margin-inline: auto;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
 }
-.hero--container .hero--text {
+@media (max-width: 480px) {
+  section.hero .hero--container {
+    display: flex;
+    flex-direction: column;
+    padding: 3rem;
+  }
+}
+section.hero .hero--container .hero--text {
   grid-column: 2/4;
 }
-.hero--container .hero--text h2 {
+section.hero .hero--container .hero--text h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
   font-size: 38px;
   font-weight: 400;
   max-width: 385px;
 }
-.hero--container .hero--text p {
+@media (max-width: 480px) {
+  section.hero .hero--container .hero--text h2 {
+    font-size: 34px;
+    line-height: 1;
+    margin-top: 2rem;
+  }
+}
+section.hero .hero--container .hero--text p {
   font-family: var(wp--preset--font-family--sora);
   font-size: 18px;
   max-width: 446px;
 }
-.hero--container .hero--img {
+section.hero .hero--container .hero--img {
   grid-column: 4/6;
   width: 100%;
   border: 1px solid white;
@@ -110,6 +140,13 @@ section {
   border-bottom-left-radius: 12px;
   border-right: none;
 }
+@media (max-width: 480px) {
+  section.hero .hero--container .hero--img {
+    order: -1;
+    border-radius: 12px;
+    border-right: 1px solid;
+  }
+}
 
 .sponsor-logos {
   padding-block: 41px;
@@ -123,6 +160,11 @@ section {
   column-gap: 2rem;
   row-gap: 1rem;
 }
+@media (max-width: 480px) {
+  .sponsor-logos .container {
+    justify-content: space-around;
+  }
+}
 
 section.pitch {
   padding-block: 82px;
@@ -142,6 +184,11 @@ section.pitch .pitch--cards {
   grid-template-columns: repeat(3, 300px);
   gap: 16px;
 }
+@media (max-width: 480px) {
+  section.pitch .pitch--cards {
+    grid-template-columns: 1fr;
+  }
+}
 section.pitch .pitch--cards .pitch--card-item {
   border: 1px solid #FAF7EF;
   border-radius: 12px;
@@ -182,11 +229,25 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
   margin-inline: auto;
   margin-block: 36px;
 }
+@media (max-width: 480px) {
+  section.book-club-examples .book-club-example-cards .book-club-example-card--item {
+    flex-direction: column;
+  }
+}
 section.book-club-examples .book-club-example-cards .book-club-example-card--item--img {
   border-radius: 12px;
   border-right: 1px solid #F6F6F8;
   object-fit: cover;
 }
+@media (max-width: 480px) {
+  section.book-club-examples .book-club-example-cards .book-club-example-card--item--img {
+    width: 100%;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--foreground-text);
+  }
+}
 section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
   padding-inline: 40px;
   padding-block: 36px;
@@ -194,15 +255,23 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
 section.book-club-examples .book-club-example-cards .book-club-example-card--item--text * {
   text-align: left;
 }
-section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
+section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p.book-club-example-card--item--text--heading {
   font-size: 18px;
 }
+section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
+  font-size: 16px;
+}
 section.book-club-examples .book-club-example-cards .book-club-example-card--item--text strong {
   font-weight: 600;
 }
 section.book-club-examples .book-club-example-cards .book-club-example-card--item--text--description {
   font-size: 16px;
 }
+@media (max-width: 480px) {
+  section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
+    padding-block: 2rem;
+  }
+}
 section.book-club-examples .btn {
   display: inline-block;
   padding-inline: 5em;
@@ -218,12 +287,23 @@ section.testimonial-section .testimonial-cards {
   gap: 1rem;
   padding-block: 84px;
 }
+@media (max-width: 480px) {
+  section.testimonial-section .testimonial-cards {
+    flex-direction: column;
+    gap: 2rem;
+  }
+}
 section.testimonial-section .testimonial-cards .testimonial-card--item {
   border: 1px solid var(--foreground-text);
   border-radius: 12px;
   padding: 64px;
   max-width: 446px;
 }
+@media (max-width: 480px) {
+  section.testimonial-section .testimonial-cards .testimonial-card--item {
+    padding: 3rem;
+  }
+}
 section.testimonial-section .testimonial-cards .testimonial-card--item .bio {
   display: flex;
   gap: 1rem;
@@ -262,6 +342,11 @@ section.faq .faq-list .faq--item {
   padding-block: 45px;
   border-bottom: 1px solid;
 }
+@media (max-width: 480px) {
+  section.faq .faq-list .faq--item {
+    padding-block: 30px;
+  }
+}
 section.faq .faq-list .faq--item:last-of-type {
   border-bottom: none;
 }
@@ -270,6 +355,11 @@ section.faq .faq-list .faq--item .answer {
   padding-left: 16px;
   display: block;
 }
+@media (max-width: 480px) {
+  section.faq .faq-list .faq--item .answer {
+    padding-left: 0;
+  }
+}
 section.faq .faq-list .faq--item summary {
   cursor: pointer;
   font-weight: 600;
@@ -295,11 +385,25 @@ section.book-club-benefits .benefit-cards {
   row-gap: 90px;
   margin-block: 140px;
 }
+@media (max-width: 480px) {
+  section.book-club-benefits .benefit-cards {
+    grid-template-columns: 1fr;
+  }
+}
 section.book-club-benefits .benefit-cards .benefit-card--item img {
-  max-width: 215px;
   border: 1px solid var(--foreground-text);
   border-radius: 12px;
 }
+@media (min-width: 1084px) {
+  section.book-club-benefits .benefit-cards .benefit-card--item img {
+    max-width: 215px;
+  }
+}
+@media (max-width: 480px) {
+  section.book-club-benefits .benefit-cards .benefit-card--item img {
+    width: 100%;
+  }
+}
 section.book-club-benefits .benefit-cards .benefit-card--item p {
   max-width: 289px;
   margin-inline: auto;
@@ -316,7 +420,6 @@ section.book-club-benefits .book-club-benefits-cta p {
 }
 
 footer.somos-infinitos-footer {
-  padding-inline: 114px;
   padding-top: 73px;
   margin-top: 200px;
   padding-bottom: 150px;
@@ -325,6 +428,26 @@ footer.somos-infinitos-footer {
   background-position: right;
   background-size: contain;
 }
+@media (min-width: 1084px) {
+  footer.somos-infinitos-footer {
+    padding-inline: 114px;
+  }
+}
+@media (max-width: 480px) {
+  footer.somos-infinitos-footer {
+    padding-inline: 3rem;
+  }
+}
+@media (max-width: 480px) {
+  footer.somos-infinitos-footer {
+    background-size: cover;
+    background-position-x: 253px;
+    padding-bottom: 50px;
+  }
+  footer.somos-infinitos-footer .container {
+    padding-inline: 0;
+  }
+}
 footer.somos-infinitos-footer .footer-navigation {
   margin-top: 75px;
   margin-bottom: 120px;
@@ -335,6 +458,12 @@ footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links {
   display: grid;
   grid-template-columns: repeat(3, 144px);
 }
+@media (max-width: 480px) {
+  footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
 footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a {
   font-size: 14px;
   display: inline-block;
@@ -358,15 +487,29 @@ footer.somos-infinitos-footer .email-cta form {
   gap: 16px;
   margin-block: 16px;
 }
+@media (max-width: 480px) {
+  footer.somos-infinitos-footer .email-cta form {
+    flex-direction: column;
+  }
+}
 footer.somos-infinitos-footer .email-cta form input {
   padding: 1em;
   font-family: inherit;
-  width: 370px;
   color: var(--foreground-text);
   background: transparent;
   border: 1px solid var(--foreground-text);
   border-radius: 12px;
 }
+@media (min-width: 1084px) {
+  footer.somos-infinitos-footer .email-cta form input {
+    width: 370px;
+  }
+}
+@media (max-width: 480px) {
+  footer.somos-infinitos-footer .email-cta form input {
+    width: 286px;
+  }
+}
 footer.somos-infinitos-footer .email-cta form input::placeholder {
   color: var(--foreground-text);
 }
@@ -377,6 +520,13 @@ footer.somos-infinitos-footer .email-cta form button.btn {
   border: 1px solid;
   cursor: pointer;
 }
+@media (max-width: 480px) {
+  footer.somos-infinitos-footer .email-cta form button.btn {
+    display: inline-block;
+    width: fit-content;
+    margin-bottom: 2rem;
+  }
+}
 footer.somos-infinitos-footer .email-cta form button.btn:hover {
   background-color: white;
   color: var(--background);

assets/css/static.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EAAU;;;AAId;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EAEE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAKvB;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAiB;;AACjB;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AA9BE;EA4BJ;IAG6B;;;;AAG7B;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AACA;EAAU;;;AAId;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAtEE;EA+DJ;IAUI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;AACA;EAEE;EACA;EACA;;AAzGA;EAqGF;IAOI;IACA;IACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAxHJ;EAoHE;IAMI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AA7IF;EAuIA;IAQI;IACA;IACA;;;;AAMR;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAhKA;EAyJF;IAUI;;;;AAKN;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;;AA1LA;EAsLF;IAG6B;;;AAG3B;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;AAxOF;EAiOA;IAE6B;;;AAO3B;EACE;EACA;EACA;;AA7OJ;EA0OE;IAKI;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAgD;;AAChD;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AA9PrB;EAuPE;IASI;;;AAMR;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAtRA;EAmRF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAhSF;EA4RA;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EAEA;;AA9UF;EAyUA;IAI6B;;;AAE3B;EAAiB;;AACjB;EACE;EACA;EAEA;;AApVJ;EAgVE;IAG6B;;;AAG7B;EACE;EACA;EACA;;AACA;EAAO;;AAIX;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;;AAhXA;EA0WF;IAG6B;;;AAMzB;EAGE;EACA;;AA1XJ;EAsXE;IAC8B;;;AApXhC;EAmXE;IAE6B;;;AAI7B;EACE;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AA1ZE;EAiZJ;IAC8B;;;AA/Y1B;EA8YJ;IAE6B;;;AAhZzB;EA8YJ;IAaI;IACA;IACA;;EAHA;IAAa;;;AAMf;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAxaF;EAoaA;IAMI;IACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;;AAGF;EACE;EAEA;EACA;;AA1cF;EAscA;IAE6B;;;AAG3B;EACE;EACA;EAGA;EACA;EACA;EACA;;AAtdJ;EA8cE;IAG8B;;;AA9chC;EA2cE;IAI6B;;;AAK3B;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AA9dJ;EAydE;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}

assets/scss/static.scss

@@ -1,3 +1,11 @@
+@mixin respond($breakpoint) {
+  @if($breakpoint == desktop)  {
+    @media (min-width: 1084px) { @content }
+  }
+  @if($breakpoint == mobile)  {
+    @media (max-width: 480px) { @content }
+  }
+}
 :root {
   --background: #040810;
   --foreground-text: #FAF7EF;
@@ -26,6 +34,7 @@ body {
 .container {
   max-width: 908px;
   margin-inline: auto;
+  @include respond(mobile) { padding: 3rem; }
 }
 
 a {
@@ -35,6 +44,7 @@ a {
 h2 {
   font-family: var(--wp--preset--font-family--eb-garamond);
   font-size: 38px;
+  line-height: 1;
 }
 
 .btn {
@@ -65,6 +75,12 @@ h2 {
   text-transform: uppercase;
   align-items: center;
 
+  @include respond(mobile) {
+    flex-direction: column;
+    padding-top: 3rem;
+    gap: 2rem;
+  }
+
   ul.pages-list {
     display: flex;
     justify-content: space-between;
@@ -86,12 +102,20 @@ section {
   padding-block: 82px;
 }
 
-.hero--container {
+section.hero {
+  padding-block: 0;
+  .hero--container {
     // max-width: 1440px;
     margin-inline: auto;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
   
+    @include respond(mobile) {
+      display: flex;
+      flex-direction: column;
+      padding: 3rem;
+    }
+    
     .hero--text {
       grid-column: 2 / 4;
   
@@ -100,6 +124,11 @@ section {
         font-size: 38px;
         font-weight: 400;
         max-width: 385px;
+        @include respond(mobile) { 
+          font-size: 34px; 
+          line-height: 1;
+          margin-top: 2rem;
+        } 
       }
   
       p {
@@ -116,6 +145,12 @@ section {
       border-top-left-radius: 12px;
       border-bottom-left-radius: 12px;
       border-right: none;
+      @include respond(mobile) {
+        order: -1;
+        border-radius: 12px;
+        border-right: 1px solid;
+      }
+    }
   }
 }
 
@@ -129,6 +164,10 @@ section {
     align-items: center;
     column-gap: 2rem;
     row-gap: 1rem;
+
+    @include respond(mobile) {
+      justify-content: space-around;
+    }
   }
 }
 
@@ -149,6 +188,7 @@ section.pitch {
   .pitch--cards {
     display: grid;
     grid-template-columns: repeat(3, 300px);
+    @include respond(mobile) { grid-template-columns: 1fr; }
     gap: 16px; 
 
     .pitch--card-item {
@@ -190,6 +230,7 @@ section.book-club-examples {
     padding-block: 84px;
     .book-club-example-card--item {
       display: flex;
+      @include respond(mobile) { flex-direction: column; }
       max-width: 908px;
       border: 1px solid var(--foreground-text);
       border-radius: 12px;
@@ -200,15 +241,26 @@ section.book-club-examples {
         border-radius: 12px;
         border-right: 1px solid #F6F6F8;
         object-fit: cover;
+        @include respond(mobile) { 
+          width: 100%;
+          border-bottom-right-radius: 0;
+          border-bottom-left-radius: 0;
+          border: none;
+          border-bottom: 1px solid var(--foreground-text);
+        }
       }
   
       &--text {
         * { text-align: left; }
         padding-inline: 40px;
         padding-block: 36px;
-        p { font-size: 18px; }
+        p.book-club-example-card--item--text--heading { font-size: 18px; }
+        p { font-size: 16px; }
         strong { font-weight: 600; }
         &--description { font-size: 16px; }
+        @include respond(mobile) {
+          padding-block: 2rem;
+        }
       }
     }
   }
@@ -230,12 +282,21 @@ section.testimonial-section {
     display: flex;
     gap: 1rem;
     padding-block: 84px;
+    @include respond(mobile) { 
+      flex-direction: column; 
+      gap: 2rem;
+    }
+
     .testimonial-card--item {
       border: 1px solid var(--foreground-text);
       border-radius: 12px;
       padding: 64px;
       max-width: 446px;
 
+      @include respond(mobile) {
+        padding: 3rem;
+      }
+
       .bio {
         display: flex;
         gap: 1rem;
@@ -275,11 +336,13 @@ section.faq {
       padding-inline: 60px;
       padding-inline-start: calc(60px - 16px);
       padding-block: 45px;
+      @include respond(mobile) { padding-block: 30px; }
       border-bottom: 1px solid;
       &:last-of-type { border-bottom: none; }
       .answer {
         margin-top: 16px;
         padding-left: 16px;
+        @include respond(mobile) { padding-left: 0; }
         display: block;
       }
       summary {
@@ -305,13 +368,15 @@ section.book-club-benefits {
   .benefit-cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    @include respond(mobile) { grid-template-columns: 1fr;  }
     gap: 16px;
     row-gap: 90px;
     margin-block: 140px;
 
     .benefit-card--item {
       img {
-        max-width: 215px;
+        @include respond(desktop) { max-width: 215px; }
+        @include respond(mobile) { width: 100%; }
         border: 1px solid var(--foreground-text);
         border-radius: 12px;
       }
@@ -337,7 +402,8 @@ section.book-club-benefits {
 }
 
 footer.somos-infinitos-footer {
-  padding-inline: 114px;
+  @include respond(desktop) { padding-inline: 114px; }
+  @include respond(mobile) { padding-inline: 3rem; }
   padding-top: 73px;
   margin-top: 200px;
   padding-bottom: 150px;
@@ -346,14 +412,26 @@ footer.somos-infinitos-footer {
   background-position: right;
   background-size: contain;
 
+  @include respond(mobile) {
+    .container { padding-inline: 0; }
+    background-size: cover;
+    background-position-x: 253px;
+    padding-bottom: 50px;
+  }
+
   .footer-navigation {
     margin-top: 75px;
     margin-bottom: 120px;
+
     ul.footer-navigation--links {
       list-style-type: none; 
       padding-inline-start: 0;
       display: grid;
       grid-template-columns: repeat(3, 144px);
+      @include respond(mobile) {
+        grid-template-columns: 1fr; 
+        gap: 1rem;
+      }
       li {
         a {
           font-size: 14px;
@@ -381,12 +459,14 @@ footer.somos-infinitos-footer {
 
     form {
       display: flex;
+      @include respond(mobile) { flex-direction: column; }
       gap: 16px;
       margin-block: 16px;
       input {
         padding: 1em;
         font-family: inherit;
-        width: 370px;
+        @include respond(desktop) { width: 370px; }
+        @include respond(mobile) { width: 286px; }
         color: var(--foreground-text);
         background: transparent;
         border: 1px solid var(--foreground-text);
@@ -402,6 +482,13 @@ footer.somos-infinitos-footer {
         color: var(--foreground-text);
         border: 1px solid;
         cursor: pointer;
+
+        @include respond(mobile) {
+          display: inline-block;
+          width: fit-content;
+          margin-bottom: 2rem;
+        }
+
         &:hover {
           background-color: white;
           color: var(--background);

page-book-club.php

@@ -87,7 +87,9 @@
     </section>
 
     <section class="book-club-examples">
+      <div class="container">
         <h2>Cada mês, convidamos um livro e encontros que unem reflexão e prática.</h2>
+
         <div class="book-club-example-cards">
           <div class="book-club-example-card--item">
             <img src="<?= get_theme_file_uri('/assets/images/book-club-example-1.jpg'); ?>" class="book-club-example-card--item--img">
@@ -105,7 +107,8 @@
               <p class="book-club-example-card--item--text--description">
                 Trazemos um convidado especial* para expandir o tema em discussão e trocar ideias que desafiam certezas. No final, sentamo-nos juntos num coffee break, com café, partilhas e conexões que ficam.
               </p>
-            <p>*<strong>10 de Maio, 2025</strong> Junta-te a nós e a <strong>Maria Gorjão</strong></p>
+              <br>
+              <p>*<strong>10 de Maio, 2025</strong>꞉ Junta-te a nós e a <strong>Maria Gorjão</strong></p>
             </div>
           </div>
           <div class="book-club-example-card--item">
@@ -122,6 +125,8 @@
           <a href="#" class="btn btn--solid">FAZ PARTE DO CLUBE</a>
           <p>Por apenas 24,60€/mês</p>
         </div>
+      </div>
+
     </section>
 
     <section class="testimonial-section">
@@ -184,8 +189,8 @@
     </section>
 
     <section class="book-club-benefits">
-      <h2>Este Book Club é para ti se:</h2>
       <div class="container">
+        <h2>Este Book Club é para ti se:</h2>
         <div class="benefit-cards">
           <div class="benefit-card--item">
             <img src="<?= get_theme_file_uri('/assets/images/benefit-card.jpg'); ?>">
@@ -204,11 +209,11 @@
             <p>Procuras um grupo de <strong>pessoas que partilham</strong> a tua sede de conhecimento.</p>
           </div>
         </div>
-      </div>
         <div class="book-club-benefits-cta">
           <a href="#" class="btn btn--solid">FAZ PARTE DO CLUBE</a>
           <p>Por apenas 24,60€/mês</p>
         </div>
+      </div>
     </section>
   </main>