export const Responsive = ({
  className,
  style,
  children,
  proportions = 1,
}: {
  children: React.ReactNode;
  proportions?: number;
  className?: string;
  style?: React.CSSProperties;
}) => {
  return (
    <div
      className={['relative', className].join(' ').trim()}
      style={{ paddingBottom: 100 * proportions + '%', ...style }}
    >
      <div className="absolute w100 h100">{children}</div>
    </div>
  );
};