conditional styled components with media query

1const CardWrapper = styled.div`
2  display: flex;
3  flex-direction: row;
4  @media (max-width: 768px) {
5    flex-direction: column;
6  }
7`;
8

1import styled, { css } from 'styled-components'
2
3const YourComponent = styled.div`
4  //...
5  
6  ${props => props.isFirstPage && css`
7     @media only screen and (max-width: 480px) {
8       padding: 8px 8px 24px 8px
9     }
10  `}
11`;
12

1export const device = {
2  mobileS: `(min-width: ${size.mobileS})`,
3  mobileM: `(min-width: ${size.mobileM})`,
4  mobileL: `(min-width: ${size.mobileL})`,
5  tablet: `(min-width: ${size.tablet})`,
6  laptop: `(min-width: ${size.laptop})`,
7  laptopL: `(min-width: ${size.laptopL})`,
8  desktop: `(min-width: ${size.desktop})`,
9  desktopL: `(min-width: ${size.desktop})`
10};
11