text: import Img from "gatsby-image"
  import styled from "styled-components"
  import variables from "../../data/variables"
  
  export const AboutSection = styled.section`
    text-align: center;
    @media only screen and (min-width: ${variables.breakpointLarge}) {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      grid-gap: 10rem;
      text-align: left;
    }
  `
  export const Avatar = styled(Img)`
    border-radius: 5px;
    box-shadow: 0px 0px 64px rgba(0, 0, 0, 0.15);
    width: 100%;
  `
  
  export const Text = styled.p`
    font-size: 1.2rem;
    line-height: 2;
    color: #232323;
    a {
      color: #3f51b5;
      text-decoration: underline;
    }
    text-align: justify;
  `
  
  export const SubTitle = styled.h2`
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
    word-spacing: 8px;
    @media (min-width: ${variables.breakpointPhone}) {
      font-size: 1.8em;
    }
  `
  