example2.jsx

import styled from 'styled-components';


const breakpoints = {
  xs: '576px',
  sm: '768px',
  md: '992px',
  lg: '1200px',
};

const media = {
  xs: `(min-width: ${breakpoints.xs})`,
  sm: `(min-width: ${breakpoints.sm}`,
  md: `(min-width: ${breakpoints.md})`,
  lg: `(min-width: ${breakpoints.lg})`,
};


// Пример
const Wrapper = styled.div`
  font-size: 15px;
  padding-top: 40px;
  padding-bottom: 40px;

  @media ${media.xs} {
    font-size: 16px;
    padding-top: 45px;
    padding-bottom: 45px;
  }

  @media ${media.sm} {
    font-size: 17px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  @media ${media.md} {
    font-size: 18px;
    padding-top: 55px;
    padding-bottom: 55px;
  }

  @media ${media.lg} {
    font-size: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }
`;