import styled from 'styled-components';

export const Box = styled.div`
padding: 1rem 1rem;
background: #F2F3F4;
bottom: 0;
width: 100%;


@media (max-width: 601px) {
	padding: 2rem 30px;
}
`;

export const Container = styled.div`
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
	/* background: red; */
`

export const Column = styled.div`
display: flex;
flex-direction: column;
text-align: left;
margin-left: 60px;
`;

export const Row = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill,
						minmax(185px, 1fr));
grid-gap: 20px;

@media (max-width: 1000px) {
	grid-template-columns: repeat(auto-fill,
						minmax(200px, 1fr));
}
`;

export const FooterLink = styled.a`
color: #17202A;
margin-bottom: 0.2rem;
font-size: medium;
text-decoration: none;

&:hover {
	color: green;
	transition: 200ms ease-in;
}
`;

export const Heading = styled.p`
font-size: large;
color: #17202A;
margin-bottom: 0.5rem;
font-weight: bold;
`;
