How to use the @artsy/reaction/dist/Assets/Fonts.garamond function in @artsy/reaction

},
              ]}
            />
          
        
      
    
  )
}

const CampaignWrapper = styled.div`
  input[type="date"] {
    padding: 6px 10px;
  }
  select {
    ${garamond("s17")};
    padding: 10px;
  }
`

const Header = styled.div`
  ${avantgarde("s11")};
  margin-bottom: 10px;
  text-transform: uppercase;
  color: ${p => p.color};
`
Header.displayName = "Header"

export const Title = styled.h1`
  ${garamond("s30")};
  margin-bottom: 15px;
`
Title.displayName = "Title"

const Description = styled.div`
  ${garamond("s19")};
  max-width: 470px;
  line-height: 1.1;
`

const Footer = styled.div`
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  align-items: center;
`

const ActionsContainer = styled.div`
  margin-right: 20px;
`

const ActionButton = styled.button`

background-color: white;
  max-width: 600px;
  align-self: center;
  padding: 20px 30px;
`

const Header = styled.div`
  ${avantgarde("s11")};
  margin-bottom: 10px;
  text-transform: uppercase;
  color: ${p => p.color};
`
Header.displayName = "Header"

export const Title = styled.h1`
  ${garamond("s30")};
  margin-bottom: 15px;
`
Title.displayName = "Title"

const Description = styled.div`
  ${garamond("s19")};
  max-width: 470px;
  line-height: 1.1;
`

const Footer = styled.div`
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  align-items: center;
`

const FooterContainer = styled.div<{ layout?: string }>`
  ${props =>
    props.layout === "standard" &&
    `
    max-width: 820px;
  `};
`

const SectionFooterPostscript = styled.div<{ width?: string }>`
  width: 100%;
  max-width: ${props => props.width || "100%"};
  margin: auto;
  padding: 20px;

  .public-DraftEditorPlaceholder-root {
    ${garamond("s23")};
    font-style: italic;
  }
`

z-index: 10;
`

const ArticlesContainer = styled.div`
  margin-top: 105px;
  position: relative;
`

const MaxWidthContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`

const Title = styled.div`
  ${garamond("s30")};
  padding: 20px 0;
`

const EmptyState = styled.div`
  text-align: center;
  margin-top: 150px;
`

const EmptyStateSection = styled.div`
  font-size: 20px;
  line-height: 28px;
`

const EmptyStateTitle = styled.div`
  margin-top: 28px;
  margin-bottom: 45px;