@comicrelief/component-library 7.37.0 → 7.38.0

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -37,11 +37,11 @@ const Link = styled(link)`
   color: inherit;
   width: 100%;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     flex-direction: ${({ category }) => !category && category !== '' && 'column'};
   }
 `;
@@ -65,13 +65,13 @@ const ImageWrapper = styled.div`
       img {
         border-radius: 1rem 1rem 0 0;
       }
-      @media ${({ theme }) => theme.breakpoint('small')} {
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
         width: 45%;
         img {
           border-radius: 1rem 0 0 1rem;
         }
       }
-      @media ${({ theme }) => theme.breakpoint('medium')} {
+      @media ${({ theme }) => theme.allBreakpoints('L')} {
         width: 100%;
         img {
           border-radius: 1rem 1rem 0 0;
@@ -88,11 +88,11 @@ const CopyWrapper = styled.div`
   ${({ category }) => !category
     && category !== ''
     && css`
-      @media ${({ theme }) => theme.breakpoint('small')} {
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
         width: 55%;
       }
     `};
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 100%;
   }
 `;

package/src/components/Molecules/Banner/Banner.js

@@ -15,11 +15,11 @@ const Container = styled.div`
   margin: 0 auto;
   max-width: ${screen.large};
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('xl')} ${spacing('l')};
   }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     padding: ${spacing('xl')} ${spacing('xl')};
   }
 `;

package/src/components/Molecules/Box/Box.js

@@ -9,11 +9,11 @@ const Container = styled.div`
   position: relative;
   height: 100%;
   flex-direction: column;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
   }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     flex-direction: column;
   }
 `;
@@ -34,11 +34,11 @@ const Copy = styled.div`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: calc(200% / 3);
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     justify-content: center;
   }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     justify-content: normal;
   }
 `;

package/src/components/Molecules/CardDs/CardDs.style.js

@@ -9,11 +9,11 @@ const Container = styled.div`
   height: 100%;
   width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
   }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     flex-direction: column;
   }
 `;
@@ -21,7 +21,7 @@ const Container = styled.div`
 const Image = styled.div`
   height: auto;
   margin: 0 0 0 ${spacing('m')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: 0 -${spacing('m')} 0 ${spacing('m')};
   }
 
@@ -33,10 +33,10 @@ const Image = styled.div`
 
 const MediaLink = styled.a`
   width: 100%;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: calc(50% + 6rem);
   }
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     width: 100%;
   }
 `;
@@ -51,7 +51,7 @@ const Copy = styled.div`
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   // width: 100%;
   margin: 0 ${spacing('m')} 0 0;
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     height: 100%;
   }
   ${zIndex('low')};
@@ -59,12 +59,12 @@ const Copy = styled.div`
     && css`
       margin-top: calc(-2 * ${spacing('m')});
       min-height: calc(5 * ${spacing('l')});
-      @media ${({ theme }) => theme.breakpoint('small')} {
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
         margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
         width: calc(50% + 6rem);
       }
 
-      @media ${({ theme }) => theme.breakpoint('large')} {
+      @media ${({ theme }) => theme.allBreakpoints('XL')} {
         margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
         width: 100%;
       }
@@ -76,7 +76,7 @@ const CTA = styled.div`
   right: ${spacing('m')};
   bottom: -${spacing('m')};
   ${zIndex('medium')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
     ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
   }

package/src/components/Molecules/DoubleCopy/DoubleCopy.style.js

@@ -4,7 +4,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Section = styled.section`
   width: 100%;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     display: flex;
   }
 `;

package/src/components/Molecules/InfoBanner/InfoBanner.js

@@ -11,7 +11,7 @@ const Container = styled.section`
   flex-wrap: wrap;
   flex-direction: column;
   position: relative;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
   }
 `;
@@ -22,7 +22,7 @@ const Info = styled.div`
   width: 100%;
   margin-bottom: ${spacing('l')};
   flex-direction: column;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: calc(100% / 3);
   }
 `;

package/src/components/Molecules/PartnerLink/PartnerLink.style.js

@@ -8,7 +8,7 @@ import zIndex from '../../../theme/shared/zIndex';
 const MoreInfo = styled(Text)`
   ${hideVisually}
   height: auto;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     font-size: ${({ theme }) => theme.fontSize('s')};
   }
 `;

package/src/components/Molecules/Promo/_PromoVideoButton.style.js

@@ -54,7 +54,7 @@ const PlayButton = styled.button`
     left: 10px;
   `}
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     top: 20px;
     right: 20px;
 

package/src/components/Molecules/SearchResult/SearchResult.js

@@ -24,7 +24,7 @@ const Item = styled(Link)`
   text-decoration: none;
   color: inherit;
   width: 100%;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
   }
   :hover {
@@ -35,10 +35,10 @@ const Item = styled(Link)`
 
 const ImageWrapper = styled.div`
   height: auto;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: ${({ smallImageWidth }) => smallImageWidth};
   }
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     width: ${({ largeImageWidth }) => largeImageWidth};
   }
 `;

package/src/components/Molecules/SingleMessage/SingleMessage.style.js

@@ -32,7 +32,7 @@ const Copy = styled.div`
   ${zIndex('low')};
   ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true ? 'display: none;' : null)};
   padding: ${spacing('l')};
-  
+
   ${media('small')} {
     ${({ vhFull, fullImage }) => (vhFull || fullImage
     ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;'
@@ -61,12 +61,12 @@ const Copy = styled.div`
     `};
 
   ${props => (props.hasImage
-    ? css`@media ${({ theme }) => theme.breakpoint('small')} {
+    ? css`@media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 50%;
           }
         `
     : css`
-          @media ${({ theme }) => theme.breakpoint('small')} {
+          @media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 100%;
             max-width ${container.small};
             padding: ${spacing('xl')};
@@ -77,13 +77,13 @@ const Copy = styled.div`
 
   ${media('medium')} {
     ${({ paddingOption }) => handlePadding(paddingOption)};
-  }      
+  }
 `;
 
 const Media = styled.div`
   width: 100%;
   ${({ fullImage }) => (fullImage ? 'height: 200px;' : 'height: 280px;')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     height: auto;
     width: ${({ fullImage }) => (fullImage ? '100%' : '50%')};
     ${({ fullImage }) => (fullImage ? 'min-height: 500px;' : null)};
@@ -129,7 +129,7 @@ const PlayButton = styled.button`
 `;
 
 const Image = styled.div`
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     img {
       position: ${({ fullImage, vhFull }) => (fullImage || vhFull ? 'absolute' : null)};
     }

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -12,7 +12,7 @@ const Title = styled(Text)`
   letter-spacing: 0.03em;
   text-transform: uppercase;
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;
@@ -57,7 +57,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Title = styled(Text)`
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;
@@ -103,7 +103,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Title = styled(Text)`
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -12,7 +12,7 @@ const Container = styled.div`
   justify-content: space-around;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: ${({ imageLeft }) => (imageLeft ? 'row' : 'row-reverse')};
   }
 `;
@@ -24,7 +24,7 @@ const Subtitle = styled(Text)`
 
 const Image = styled.div`
   height: 100%;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     height: 448px;
   }
   img {
@@ -38,7 +38,7 @@ const MediaLink = styled.a`
     ? `margin-right: ${spacing('m')}`
     : `margin-left: ${spacing('m')}`)};
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: 0;
     height: 448px;
     flex-grow: 0;
@@ -109,7 +109,7 @@ const CTA = styled.div`
     font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
   }
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`}
   }
 `;
@@ -133,7 +133,7 @@ const Copy = styled.div`
   )};
 
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     min-height: 448px;
     height: auto;
     width: calc(50% + 1.5rem);
@@ -149,7 +149,7 @@ const Copy = styled.div`
     : `margin: ${spacing('l')} -${spacing('m')} ${spacing('m')} 0`)};
   }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     padding: calc(${spacing('m')} * 2);
 
     ${({ hasLink }) => hasLink && `padding-bottom: calc(${spacing('m')} * 3)`};

package/src/components/Organisms/CookieBanner/CookieBanner.style.js

@@ -20,7 +20,7 @@ const CookieText = styled(Text)`
   &:first-of-type {
     margin-bottom: ${spacing('sm')};
   }
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 75%;
     margin: ${spacing('none')} auto;
     &:first-of-type {
@@ -33,7 +33,7 @@ const AcceptCookieBtn = styled(Link)`
   padding: ${spacing('sm')} ${spacing('md')};
   display: block;
   margin-bottom: 10px;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: 0 ${spacing('xsm')} 0 0;
     display: inline-block;
   }

package/src/components/Organisms/EmailSignUp/EmailSignUp.style.js

@@ -51,11 +51,11 @@ const NameWrapper = styled.div`
   flex-direction: column;
   gap: 0;
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     justify-content: start;
     flex-direction: ${({ columnLayout }) => (columnLayout ? 'column' : 'row')};
     gap: ${({ columnLayout }) => (columnLayout ? 0 : spacing('md'))};
-)}; 
+)};
 
   }
 `;
@@ -68,7 +68,7 @@ const InputField = styled(TextInput)`
     color: ${({ theme }) => theme.color('white')};
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     max-width: 290px;
   }
 `;

package/src/components/Organisms/Footer/Footer.style.js

@@ -11,7 +11,7 @@ const FooterWrapper = styled.footer.attrs(() => ({
   background: #222;
   position: relative;
   padding: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('l')};
   }
 `;
@@ -23,7 +23,7 @@ const Angle = styled.div`
   height: 50px;
   background: #222;
   margin-bottom: 1rem;
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     clip-path: polygon(0 100%,100% 0,100% 101%,0 101%);
     height: 95px;
   }
@@ -37,7 +37,7 @@ const InnerWrapper = styled.div`
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 ${spacing('md')} ${spacing('l')};
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     padding: 0 ${spacing('md')} ${spacing('xl')};
   }
 `;
@@ -67,7 +67,7 @@ const FooterCopyright = styled.div`
     line-height: 24px;
     margin-bottom: 5px;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       font-size: 16px;
       line-height: 27px;
     }

package/src/components/Organisms/Footer/Nav/Nav.style.js

@@ -51,7 +51,7 @@ const SubNavMenu = styled.ul`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     max-height: none;
     height: auto;
 
@@ -73,7 +73,7 @@ const SubNavItem = styled.li`
   background-color: inherit;
   padding: 8px 0;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     height: auto;
     margin-top: 12px;
     padding: 0;
@@ -99,7 +99,7 @@ const SubNavItem = styled.li`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     ${({ column }) => (column === true ? 'flex: 0 0 100%;' : null)};
   }
 `;
@@ -122,7 +122,7 @@ const NavMenu = styled.ul`
   padding: 0;
   margin: 0;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     display: flex;
     flex-wrap: wrap;
     justify-content: start;
@@ -143,12 +143,12 @@ const NavItem = styled.li`
   margin: 0;
   margin-bottom: 1rem;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex: 0 0 30%;
     margin: 0;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     /* Minus 9% to remove 3 x 1.5% margins from previous rule */
     flex: 0 0 calc(25% - 1rem);
     margin-right: 1rem;
@@ -169,7 +169,7 @@ const NavItem = styled.li`
     line-height: 40px;
     font-weight: 800;
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       font-size: 20px;
       line-height: 40px;
     }
@@ -190,7 +190,7 @@ const NavItem = styled.li`
       right: -25px;
     }
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       cursor: default;
       display: inline;
 

package/src/components/Organisms/Header/Burger/BurgerMenu.style.js

@@ -91,7 +91,7 @@ const BurgerWrapper = styled(Link)`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     display: none;
   }
 `;

package/src/components/Organisms/Header/Header.style.js

@@ -12,7 +12,7 @@ const HeaderWrapper = styled.header.attrs(() => ({
   padding: 0;
   height: 75px;
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     height: auto;
   }
 `;
@@ -25,7 +25,7 @@ const InnerWrapper = styled.div`
   cursor: pointer;
   max-width: ${container.large};
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin: 0 auto;
   }
 `;
@@ -72,7 +72,7 @@ const MetaIcons = styled.div`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     position: relative;
     display: flex;
     align-items: center;

package/src/components/Organisms/Header/Nav/Nav.style.js

@@ -38,7 +38,7 @@ const Nav = styled.nav`
     left: inherit;
   }
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     ${zIndex('medium')};
     position: relative;
     top: 0;
@@ -67,7 +67,7 @@ const SubNavMenu = styled.ul`
   align-items: center;
   background-color: ${({ theme }) => theme.color('deep_violet_dark')};
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     display: none;
     display: ${({ isKeyPressed }) => (isKeyPressed ? 'flex' : 'none')};
     top: 90px;
@@ -120,7 +120,7 @@ const SubNavLinkUnderline = styled(SubNavLink)`
     bottom: 10px;
     margin: 0 10px;
   }
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     ::before {
       display: block;
       position: absolute;
@@ -147,7 +147,7 @@ const NavMenu = styled.ul`
   padding: 0;
   margin: 0;
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     position: relative;
     display: flex;
     flex-wrap: wrap;
@@ -164,7 +164,7 @@ const NavLink = styled(NavLinkClass)`
   display: flex;
   gap: 4px;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     padding: 10px 0;
     height: auto;
     :focus + ${SubNavMenu} {
@@ -203,7 +203,7 @@ const NavItem = styled.li`
   :hover {
     background-color: ${({ theme }) => theme.color('teal_light')};
   }
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin: 0 4px;
     padding: 25px 5px;
 

package/src/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js

@@ -10,7 +10,7 @@ const MoneybuyWrapper = styled.div`
     justify-content: space-between;
     align-items: center;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         flex-direction: row;
         align-items: stretch;
     }
@@ -34,13 +34,13 @@ const Moneybuy = styled.div`
         opacity: 0.5;
     `}
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
         width: 70%;
         padding: 8px 40px;
 
     }
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         padding: 20px 14px;
         flex-direction: column;
         width: 18%;
@@ -56,13 +56,13 @@ const OrLabel = styled(Text)`
 `;
 
 const MoneybuyImage = styled.span`
-    background: center / 65% no-repeat url("${props => props.imageURL}"), 
+    background: center / 65% no-repeat url("${props => props.imageURL}"),
     ${props => props.theme.color('grey_extra_light')};
     width: 48px;
     height: 48px;
     border-radius: 48px;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         width: 0;
         height: 0;
         padding: 30%;
@@ -75,7 +75,7 @@ const MoneybuyAmount = styled(Text)`
     margin: 0 10px;
     width: 25%;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         margin: 8px 15px 2px;
         width: auto;
     }
@@ -85,7 +85,7 @@ const MoneybuyDescription = styled(Text)`
     text-align: left;
     width: 50%;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         width: 100%;
         text-align: center;
     }