Styled Component Media Query

file.js

import styled from "styled-components";
import media from "./media";
export const TitleContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 3rem;
  ${media.desktop`
    height: 245px;
    padding: 3rem 6rem;
  `};
  ${media.widescreen`
    padding: 3rem 6rem;
    height: 345px;
  `};
`;

media.js

import { css } from "styled-components";

const breakpoints = {
  uhd: 1980,
  widescreen: 1366,
  desktop: 1024,
  tablet: 768,
};

export const media = Object.keys(breakpoints).reduce((acc: { [key: string]: (...args: any) => any }, label) => {
  acc[label] = (...args) => css`
     @media (min-width: ${breakpoints[label as keyof typeof breakpoints]}px) {
        ${css(...args as [any])};
     }
  `;
  return acc;
}, {});