{"size": 915, "ext": "js", "max_stars_repo_path": "src/components/Blog/Detail/RelatedBlogStyles.js", "max_stars_repo_name": "BuckinghamS/buckingham-taal-service-site", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Blog/Detail/RelatedBlogStyles.js", "max_issues_repo_name": "BuckinghamS/buckingham-taal-service-site", "max_issues_repo_issues_event_min_datetime": "2021-07-10T13:27:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-21T01:45:24.000Z", "max_forks_repo_path": "src/components/Blog/Detail/RelatedBlogStyles.js", "max_forks_repo_name": "BuckinghamS/buckingham-taal-service-site", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 53, "max_forks_count": null, "avg_line_length": 24.7297297297, "max_line_length": 63, "alphanum_fraction": 0.6535519126}
import styled from '@emotion/styled'
import * as BP from '../../../styles/breakPoints'

export const Banner = styled.div`
  background-color: hsl(170, 25%, 29%);
`
export const HeaderContainer = styled.div`
  margin: 0 auto;
  max-width: 50%;
  padding: 1rem 0 5rem;
  display: flex;
  place-content: center;
  @media only screen and (max-width: ${BP.MAX_M}) {
    max-width: 100%;
    text-align: center;
  }
`

export const BlogContainer = styled.div`
  justify-items: center;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  grid-column-gap: 2rem;
  max-width: 65%;
  margin: 0 auto;
  transform: translateY(-3rem);
  @media only screen and (max-width: ${BP.MAX_L}) {
    max-width: 100%;
    grid-row-gap: 2rem;
    place-items: center;
  }
  @media only screen and (max-width: ${BP.MAX_M}) {
    grid-template-columns: none;
    max-width: 100%;
    place-items: center;
  }
`