Although Atomic Layout provides the Responsive props feature for shorter responsive declarations of various CSS properties, sometimes declaring an explicit media query is necessary.
To preserve Atomic Layout breakpoints as a source of truth it's recommended to reference breakpoints' dimensions from the Layout
namespace exported by the library.
import Layout from 'atomic-layout'export const CustomComponent = styled.div`color: #000;@media (min-width: ${Layout.breakpoints.md.minWidth}) {color: #ffbbcc;}`
See all the breakpoint properties you can use in the Breakpoints section.