text: import styled, { css } from "styled-components";
  import Box from "../../accessories/Box";
  import Button from "../../accessories/Button";
  import Text from "../../accessories/Text";
  
  const MosaicStyles = styled(Box)(
      ({ theme }) => css`
          max-width: 1280px;
          padding: ${theme.space.base};
  
          @media (min-width: ${theme.breakpoints.xl}) {
              margin: ${theme.space.zero} ${theme.space.auto};
          }
  
      `,
  );
  const ContainerItemsStyles = styled(Box)(
      ({ theme }) => css`
          max-width: 1280px;
          display: grid;
          grid-template-columns: repeat(4, 25%);
          grid-template-rows: auto;
          margin: ${theme.space.zero};
  
          @media (min-width: ${theme.breakpoints.lg}) {
              grid-template-columns: repeat(7, auto);
              margin: ${theme.space.sm};
          }
  
       
      `,
  );
  
  const MosaicButtonContainer = styled(Box)(
      ({ theme }) => css`
          width: 100%;
          height: auto;
          display: flex;
          margin: ${theme.space.xl} ${theme.space.zero};
          justify-content: center;
  
          @media (min-width: ${theme.breakpoints.xl}) {
              display: none;
          }
      `,
  
  );
  
  const MosaicButton = styled(Button)(
      ({ theme }) => css`
          width: 120px;
          height: 30px;
          border-radius: 6px;
          text-transform: capitalize;
          display: flex;
          justify-content: center;
          color: ${theme.colors.Light};
          border: 1px solid ${theme.colors.Interaction};
          background: transparent;
  
      `,
  );
  
  const MosaicButtonText = styled(Text)(
      ({ theme }) => css`
          color: ${theme.colors.Dark};
          width: 100px;
          text-align: center;
          font-family: ${theme.fonts[2]};
          font-weight: normal;
      `,
  );
  
  export { MosaicStyles, ContainerItemsStyles, MosaicButtonContainer, MosaicButton, MosaicButtonText };
  