{"size": 996, "ext": "js", "max_stars_repo_path": "src/components/servicecard.js", "max_stars_repo_name": "kavpro/website", "max_stars_repo_stars_event_min_datetime": "2020-03-30T17:39:40.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-30T17:39:40.000Z", "max_issues_repo_path": "src/components/servicecard.js", "max_issues_repo_name": "kavpro/website", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/servicecard.js", "max_forks_repo_name": "kavpro/website", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 17.7857142857, "max_line_length": 48, "alphanum_fraction": 0.4789156627}
import React from 'react'

import { secondary } from './colours'

const ServiceCard = ({ icon, title, body }) => (
  <div
    css={`
      display: grid;
      grid-template-rows: 1fr 20px 100px;
      padding: 10px;
      max-height: 300px;
      align-items: center;
      justify-items: center;
      min-width: 300px;
      color: white;
      background: ${secondary};
      border-radius: 3px;
      @media screen and (max-width: 1093px) {
        max-width: 450px;
      }
      @media screen and (max-width: 425px) {
        min-width: 100px;
        margin: 10px;
      }
    `}
  >
    <img
      css={`
        height: 70px;
        @media screen and (max-width: 425px) {
          height: 50px;
        }
      `}
      src={icon}
      alt={title}
    />
    <p
      css={`
        margin: 0;
        font-weight: 900;
      `}
    >
      {title}
    </p>
    <p
      css={`
        text-align: justify;
      `}
    >
      {body}
    </p>
  </div>
)

export default ServiceCard
