{"size": 1937, "ext": "js", "max_stars_repo_path": "components/main/OurFeatures/OurFeatures.styles.js", "max_stars_repo_name": "CSSSR/csssr.com", "max_stars_repo_stars_event_min_datetime": "2020-07-06T11:51:24.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-24T22:07:34.000Z", "max_issues_repo_path": "components/main/OurFeatures/OurFeatures.styles.js", "max_issues_repo_name": "CSSSR/csssr.com", "max_issues_repo_issues_event_min_datetime": "2020-07-06T07:29:10.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-24T08:06:21.000Z", "max_forks_repo_path": "components/main/OurFeatures/OurFeatures.styles.js", "max_forks_repo_name": "CSSSR/csssr.com", "max_forks_repo_forks_event_min_datetime": "2021-03-01T02:18:39.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-22T07:40:58.000Z"}
{"max_stars_count": 8, "max_issues_count": 116, "max_forks_count": 2, "avg_line_length": 15.2519685039, "max_line_length": 74, "alphanum_fraction": 0.508002065}
import { css } from '@emotion/react'

import calcRem from '../../../utils/style/calcRem'

const base = ({ breakpoints: { desktop, tablet, mobile }, colors}) => css`
  .feature {
    color: ${colors.secondary.darken100};
    z-index: 0;
  }

  .feature_1,
  .feature_1 + .link {
    grid-column: 2 / span 4;
  }

  .feature_2,
  .feature_2 + .link {
    grid-column: 5 / span 6;
  }

  .feature_2 {
    margin-top: 68px;
  }

  .link {
    margin-top: 28px;
  }

  .picture {
    width: 100%;
  }

  ${desktop.all} {
    & {
      margin-top: 152px;
    }
  }

  ${desktop.l} {
    .picture {
      margin-top: -120px;
      margin-left: -32px;
      grid-column: 5 / span 5;
      width: calc(100% + 32px);
    }
  }

  ${desktop.m} {
    .picture {
      margin-top: -167px;
      grid-column: 4 / span 7;
    }
  }

  ${desktop.s} {
    .picture {
      margin-top: -216px;
      grid-column: 4 / span 8;
    }
  }

  ${tablet.all} {
    & {
      margin-top: ${calcRem(126)};
    }

    .feature_2 {
      margin-top: ${calcRem(47)};
    }

    .link {
      margin-top: ${calcRem(22)};
    }

    .feature_2 + .link {
      margin-top: ${calcRem(24)};
    }

    .picture {
      margin-top: ${calcRem(-88)};
      grid-column: 4 / span 7;
    }
  }

  ${mobile.all} {
    & {
      margin-top: ${calcRem(103)};
    }

    .feature_1,
    .feature_1 + .link {
      grid-column: 2 / span 5;
    }

    .feature_2,
    .feature_2 + .link,
    .picture {
      grid-column: 1 / span 6;
    }

    .link {
      margin-top: ${calcRem(14)};
    }

    .picture {
      margin-left: -1rem;
      margin-top: ${calcRem(33)};
      width: calc(100% + 2rem);
    }

    .feature_2 {
      margin-top: ${calcRem(25)};
    }
  }
`

const StyledOurFeatures = props => {
  const breakpoints = props.theme.breakpoints
  const colors = props.theme.colors

  return css`
    ${base({ breakpoints, colors })}
  `
}

export default StyledOurFeatures
