<commit_before>import { Box, Flex, Sans, Spacer } from "@artsy/palette"
import { CollectionsRail_collections } from "__generated__/CollectionsRail_collections.graphql"
import React, { SFC } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"

import { CollectionEntityFragmentContainer as CollectionEntity } from "./Collection"

interface CollectionRailsProps {
  collections: CollectionsRail_collections
}

const RailsWrapper = styled(Flex)`
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  flex-direction: column;
`

export const CollectionsRail: SFC<CollectionRailsProps> = ({ collections }) => {
  return (
    <RailsWrapper pb={3} px={["30px", 0]}>
      <Sans size="6">Shop artworks from curated collections</Sans>
      <Spacer mb={3} />
      <Flex flexWrap="wrap">
        {collections.map((collection, index) => {
          const shouldAddPadding = index % 2 === 0
          return (
            <Box
              width={["100%", "50%"]}
              key={index}
              pr={[0, shouldAddPadding ? 2 : 0]}<commit_msg>ensure rails container has correct spacing responsively<commit_after>import { Box, Flex, Sans, Spacer } from "@artsy/palette"
import { CollectionsRail_collections } from "__generated__/CollectionsRail_collections.graphql"
import React, { SFC } from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"

import { pMedia } from "Components/Helpers"
import { CollectionEntityFragmentContainer as CollectionEntity } from "./Collection"

interface CollectionRailsProps {
  collections: CollectionsRail_collections
}

const RailsWrapper = styled(Flex)`
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  flex-direction: column;
  ${pMedia.xl`
    padding: 40px;
  `};
  ${pMedia.lg`
    padding: 40px;
  `};
  ${pMedia.xs`
    padding: 40px 30px;
  `};
`

export const CollectionsRail: SFC<CollectionRailsProps> = ({ collections }) => {
  return (
    <RailsWrapper pb={3}>
      <Sans size="6">Shop artworks from curated collections</Sans>
      <Spacer mb={3} />
      <Flex flexWrap="wrap">
        {collections.map((collection, index) => {
          const shouldAddPadding = index % 2 === 0
          return (
            <Box
              width={["100%", "50%"]}
              key={index}
              pr={[0, shouldAddPadding ? 2 : 0]}
{'fraction_non_alphanumeric': 0.1264559068219634, 'fraction_numerical': 0.02204658901830283, 'mean_word_length': 3.470260223048327, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, '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': '4734113', 'n_tokens_mistral': 766, 'n_tokens_neox': 715, 'n_words': 183}