trampa-frontend/src/components/About/AboutHeader/AboutHeader.styled.js

import { Box, styled, Typography } from "@mui/material";
import selectedTheme from "../../../themes";

export const AboutHeaderContainer = styled(Box)`
  margin: 72px;

  @media (max-width: 1430px) {
    margin: 45px;
  }

  @media (max-width: 1200px) {
    margin: 36px;
  }

  @media (max-width: 600px) {
    margin: 52px 36px 36px 36px;
  }
`;
export const AboutHeaderTitle = styled(Typography)`
  font-family: ${selectedTheme.fonts.textFont};
  font-style: normal;
  font-weight: 700;
  font-size: 72px;
  line-height: 98px;
  color: ${selectedTheme.colors.primaryPurple};

  @media (max-width: 600px) {
    font-size: 36px;
    line-height: 49px;
  }
`;
export const AboutHeaderParagraph = styled(Typography)`
  font-family: ${selectedTheme.fonts.textFont};
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: ${selectedTheme.colors.primaryGrayText};

  @media (max-width: 600px) {
    font-size: 14px;
  }
`;
export const AboutHeaderLine = styled(Box)`
  border-top: 1px solid ${selectedTheme.colors.iconYellowColor};
  width: 90px;
  margin-bottom: 26px;

  @media (max-width: 600px) {
    width: 54px;
  }
`;