Collection Adding Borders

collection-gist-1.js

export const Collection = styled('div')(({ theme }) => ({
    display: 'grid',
    gridGap: 12,
    gridTemplateColumns: '1fr',
    paddingBottom: 8,
    borderBottom: '4px double grey',

    '& > div:not(:first-child)': {
        position: 'relative',

        '&::after': {
            content: `''`,
            height: '100%',
            width: 1,
            transform: 'translateX(-6px)',
            position: 'absolute',
            bottom: 0,
            left: 0,
            backgroundColor: lightgrey,
        },
    },

    [breakpoint('sm')]: {
        gridTemplateColumns: 'repeat(2, 1fr)',
    },

    [breakpoint('md')]: {
        gridTemplateColumns: 'repeat(4, 1fr)',
    },

}))

// For nested cards within a column add a bottom border
export const CardContainer = styled('div')(
    ({ theme }) => ({
        display: 'flex',
        flexGrow: 1,
        flexShrink: 1,
        flexWrap: 'wrap',
        flexDirection: 'column',
        justifyContent: 'flex-start',

        '& > *:not(:last-child)': {
            borderBottom: `1px solid grey`,
        },
    }),
)