<commit_before>import { useState, useEffect, useRef } from 'react';
import { c, t, jt } from 'ttag';
import { makeStyles } from '@material-ui/core/styles';
import { animated, useSpring } from 'react-spring';

import image from './images/stats.png';

const useStyles = makeStyles(theme => ({
  sectionStats: {
    background: 'white',
    padding: '70px 0 90px',

    [theme.breakpoints.down('md')]: {
      padding: '50px 0 60px',
    },
  },
  top: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginBottom: 60,

    [theme.breakpoints.down('sm')]: {
      marginBottom: 35,
    },
  },
  title: {
    textAlign: 'center',
    color: theme.palette.secondary[500],
    marginBottom: -100,

    [theme.breakpoints.up('md')]: {
      maxWidth: process.env.LOCALE === 'en_US' ? 500 : 'unset',
    },

    [theme.breakpoints.down('sm')]: {
      marginBottom: 20,
    },

    '& > h3': {
      fontSize: 48,
      fontWeight: 'bold',
      lineHeight: 1.45,
      marginBottom: 22,

      [theme.breakpoints.down('sm')]: {
        fontSize: 24,
        fontWeight: 'normal',
        marginBottom: 12,
      },
    },

    '& > h4': {
      fontSize: 34,
      fontWeight: 500,
      lineHeight: 1.45,

      [theme.breakpoints.down('sm')]: {
        fontSize: 18,
        fontWeight: 'normal',
      },
    },
  },
  image: {
    '& > img': {
      [theme.breakpoints.down('md')]: {
        width: '100%',
      },
    },
  },
  stats: {
    display: 'flex',
    flexWrap: 'wrap',
    maxWidth: 1134,
    margin: '0 auto',

    [theme.breakpoints.down('sm')]: {
      maxWidth: 400,
    },
  },
  item: {
    display: 'flex',
    position: 'relative',
    flexWrap: 'wrap',
    justifyContent: 'center',
    fontSize: 24,
    lineHeight: 1.45,
    color: theme.palette.secondary[500],
    padding: '0 27px',
    width: '25%',
    whiteSpace: process.env.LOCALE === 'en_US' ? 'initial' : 'nowrap',
    textAlign: 'center',

    '& a': {
      textAlign: 'center',
    },

    [theme.breakpoints.down('sm')]: {
      padding: '20px',
      width: '50%',
      fontSize: 14,
    },
  },
  count: {
    color: theme.palette.common.red1,
    fontWeight: 500,
    fontSize: 96,
    lineHeight: 1.67,
    width: '100%',
    textAlign: 'center',

    [theme.breakpoints.down('sm')]: {
      fontSize: 64,
      lineHeight: 1.3,<commit_msg>[LandingPage] remove flexbox and related styles<commit_after>import { useState, useEffect, useRef } from 'react';
import { c, t, jt } from 'ttag';
import { makeStyles } from '@material-ui/core/styles';
import { animated, useSpring } from 'react-spring';

import image from './images/stats.png';

const useStyles = makeStyles(theme => ({
  sectionStats: {
    background: 'white',
    padding: '70px 0 90px',

    [theme.breakpoints.down('md')]: {
      padding: '50px 0 60px',
    },
  },
  top: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginBottom: 60,

    [theme.breakpoints.down('sm')]: {
      marginBottom: 35,
    },
  },
  title: {
    textAlign: 'center',
    color: theme.palette.secondary[500],
    marginBottom: -100,

    [theme.breakpoints.up('md')]: {
      maxWidth: process.env.LOCALE === 'en_US' ? 500 : 'unset',
    },

    [theme.breakpoints.down('sm')]: {
      marginBottom: 20,
    },

    '& > h3': {
      fontSize: 48,
      fontWeight: 'bold',
      lineHeight: 1.45,
      marginBottom: 22,

      [theme.breakpoints.down('sm')]: {
        fontSize: 24,
        fontWeight: 'normal',
        marginBottom: 12,
      },
    },

    '& > h4': {
      fontSize: 34,
      fontWeight: 500,
      lineHeight: 1.45,

      [theme.breakpoints.down('sm')]: {
        fontSize: 18,
        fontWeight: 'normal',
      },
    },
  },
  image: {
    '& > img': {
      [theme.breakpoints.down('md')]: {
        width: '100%',
      },
    },
  },
  stats: {
    display: 'flex',
    flexWrap: 'wrap',
    maxWidth: 1134,
    margin: '0 auto',

    [theme.breakpoints.down('sm')]: {
      maxWidth: 400,
    },
  },
  item: {
    position: 'relative',
    fontSize: 24,
    lineHeight: 1.45,
    color: theme.palette.secondary[500],
    padding: '0 27px',
    width: '25%',
    whiteSpace: process.env.LOCALE === 'en_US' ? 'initial' : 'nowrap',
    textAlign: 'center',

    '& a': {
      textAlign: 'center',
    },

    [theme.breakpoints.down('sm')]: {
      padding: '20px',
      width: '50%',
      fontSize: 14,
    },
  },
  count: {
    color: theme.palette.common.red1,
    fontWeight: 500,
    fontSize: 96,
    lineHeight: 1.67,
    width: '100%',
    textAlign: 'center',

    [theme.breakpoints.down('sm')]: {
      fontSize: 64,
      lineHeight: 1.3,
{'fraction_non_alphanumeric': 0.17956920452121988, 'fraction_numerical': 0.040093836638942205, 'mean_word_length': 2.3168316831683167, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3286556', 'n_tokens_mistral': 1818, 'n_tokens_neox': 1655, 'n_words': 336}