Responsiveness fixes

src/components/Hero/HeroPrimaryButtons.tsx

@@ -6,7 +6,7 @@ const Buttons = styled.div<{row?: boolean}>`
   max-width: fit-content;
   margin: auto;
   display: flex;
-  flex-direction: ${(p) => p.row ? "row" : "column"};
+  flex-flow: ${(p) => p.row ? "row" : "column"} wrap;
 
   a {
     display: contents;

src/components/Hero/HeroSecondarySection.tsx

@@ -46,7 +46,7 @@ const Section = styled.section`
 
 const Items = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
 `;
 
 interface HeroSecondarySectionProps {

src/components/Sections/TextSection.tsx

@@ -6,6 +6,9 @@ const StyledSection = styled.section`
   display: grid;
   padding: 24px;
 
+  word-break: break-word;
+  hyphens: auto;
+
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-rows: 1fr auto;
   grid-template-areas:

src/views/ActualPage/FilterContainer.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const FilterContainer = styled.div`
   display: flex;
+  flex-flow: row wrap;
   margin: auto;
   justify-content: center;
 `;

src/views/CorporatePage/JobAdList.tsx

@@ -10,6 +10,7 @@ interface JobAdListProps {
 }
 
 const List = styled.ul`
+  padding: 0;
   li {
     margin: 1rem 0;
     list-style: none;

src/views/GuildPage/GuildPageView.tsx

@@ -7,7 +7,7 @@ import { colors } from "@theme/colors";
 
 const Column = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
 
   a {
     color: inherit;

src/views/StudiesPage/StudiesPageView.tsx

@@ -6,6 +6,7 @@ import StudiesPageHero from "./StudiesPageHero";
 const TestimonialImage = styled.img`
   max-width: 500px;
   max-height: 500px;
+  width: 100%;
 `;
 
 const StudiesPageView: React.FC = () => (