diff --git a/src/components/generic-components.ts b/src/components/generic-components.ts
index e7dc52c5..6f4e943e 100644
--- a/src/components/generic-components.ts
+++ b/src/components/generic-components.ts
@@ -2,6 +2,22 @@ import styled from "@emotion/styled";
 import { FormContainer } from "./landing-page/form-elements";
 import { isMobile } from "../bowser";
 
+// Screen size breakpoints based on width
+export const breakpoints = {
+  tiny: 480,
+  small: 768,
+  medium: 1024,
+  large: 1440,
+};
+
+// Media query helper functions
+export const mediaQueries = {
+  isTinyScreen: `@media (max-width: ${breakpoints.tiny}px)`,
+  isSmallScreen: `@media (max-width: ${breakpoints.small}px)`,
+  isMediumScreen: `@media (max-width: ${breakpoints.medium}px)`,
+  isLargeScreen: `@media (max-width: ${breakpoints.large}px)`,
+};
+
 export const FlexContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -28,6 +44,18 @@ export const ResponsiveFormContainer = styled(FormContainer)`
     flex: 0 0 calc(25% - 2rem);
     ${isMobile ? `flex-grow: 1;` : `flex-grow: 0;`}
     min-width: 30rem;
+
+    ${mediaQueries.isLargeScreen} {
+      flex: 0 0 calc(33.333% - 2rem);
+    }
+
+    ${mediaQueries.isMediumScreen} {
+      flex: 0 0 calc(50% - 2rem);
+    }
+
+    ${mediaQueries.isSmallScreen} {
+      flex: 0 0 calc(100%);
+    }
   }
 `;
 
diff --git a/src/components/production-line/production-line-components.ts b/src/components/production-line/production-line-components.ts
index 223efe76..1efca372 100644
--- a/src/components/production-line/production-line-components.ts
+++ b/src/components/production-line/production-line-components.ts
@@ -1,5 +1,9 @@
 import styled from "@emotion/styled";
-import { DisplayContainer, FlexContainer } from "../generic-components";
+import {
+  DisplayContainer,
+  FlexContainer,
+  mediaQueries,
+} from "../generic-components";
 import { ActionButton } from "../landing-page/form-elements";
 import {
   HeaderWrapper,
@@ -143,7 +147,7 @@ export const CallWrapper = styled.div<{ isSomeoneSpeaking: boolean }>`
   margin: 0 0 2rem 0;
   flex: 0 0 calc(25% - 2rem);
   ${isMobile ? `flex-grow: 1;` : `flex-grow: 0;`}
-  min-width: 30rem;
+  min-width: 35rem;
   background-color: transparent;
   border-radius: 0.5rem;
   animation: ${({ isSomeoneSpeaking }) =>
@@ -160,6 +164,18 @@ export const CallWrapper = styled.div<{ isSomeoneSpeaking: boolean }>`
       background-color: transparent;
     }
   }
+
+  ${mediaQueries.isLargeScreen} {
+    flex: 0 0 calc(33.333% - 2rem);
+  }
+
+  ${mediaQueries.isMediumScreen} {
+    flex: 0 0 calc(50% - 2rem);
+  }
+
+  ${mediaQueries.isSmallScreen} {
+    flex: 0 0 calc(100%);
+  }
 `;
 
 export const CallContainer = styled(ProductionItemWrapper)<{
diff --git a/src/components/production-list/production-list-components.ts b/src/components/production-list/production-list-components.ts
index b2c020a7..8bf1eb62 100644
--- a/src/components/production-list/production-list-components.ts
+++ b/src/components/production-list/production-list-components.ts
@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { isMobile } from "../../bowser";
 import { PrimaryButton, SecondaryButton } from "../landing-page/form-elements";
+import { mediaQueries } from "../generic-components";
 
 export const ProductionItemWrapper = styled.div`
   text-align: start;
@@ -14,6 +15,18 @@ export const ProductionItemWrapper = styled.div`
   border-radius: 0.5rem;
   margin: 0 2rem 2rem 0;
   cursor: pointer;
+
+  ${mediaQueries.isLargeScreen} {
+    flex: 0 0 calc(33.333% - 2rem);
+  }
+
+  ${mediaQueries.isMediumScreen} {
+    flex: 0 0 calc(50% - 2rem);
+  }
+
+  ${mediaQueries.isSmallScreen} {
+    flex: 0 0 calc(100%);
+  }
 `;
 
 export const ProductionName = styled.div`