import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: ${(p) => `32px ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
`;

const InfoWrapper = styled.div`
  width: 450px;
  margin-left: 85px;
  margin-bottom: 16px;
`;

const Title = styled.div`
  ${(p) => p.theme.textStyle.headingM};
  margin-bottom: ${(p) => p.theme.spacing.xs};
`;

const Text = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  font-weight: 400;
`;

const ImageWrapper = styled.div`
  flex-grow: 1;
`;

export { Wrapper, InfoWrapper, Title, Text, ImageWrapper };
