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; `;