starter/src/components/molecules/Brand/index.tsx

import Link from '../Link'
import styled from 'styled-components'

const BrandBase = styled(Link)({
	display: 'block',
	textDecoration: 'none',
	fontSize: '1.5rem',
	fontWeight: 'bold',
	fontStretch: '75%',
	textTransform: 'uppercase',
	width: '2rem',
	textAlign: 'center',
	'@media (min-width: 720px)': {
		width: '8rem',
		textAlign: 'left',
	},
})

const Hide = styled('span')({
	display: 'none',
	'@media (min-width: 720px)': {
		display: 'inline',
	},
})

const Brand = () => {
	return (
		<BrandBase
			href={{
				pathname: '/',
			}}
		>
			B
			<Hide>
				rand
			</Hide>
		</BrandBase>
	)
}

export default Brand