import { styled } from 'styled-components';

export const StyledAbout = styled.section`
  display: flex;
  flex-direction: column;
  justify-content: center;

  .about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
    margin-top: 100px;

    img {
      border-radius: 1em;
      max-width: 100%;
    }

    .about-content {
      h2 {
        font-size: 1.5em;
        color: ${({ theme }) => theme.colors['200']};
      }

      p {
        color: ${({ theme }) => theme.colors['300']};
        margin-top: 2em;
        text-align: justify;
        line-height: 1.7;
      }
    }
  }
`;
