components.js

const Sidebar = styled.div`
	display: grid;
	grid-template-areas:
		'avatar greeting'
		'avatar socials'
		'avatar contacts'
		'avatar buttons';
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto auto auto;

	${media.up('md')`
		grid-template-areas:
			'avatar greeting buttons'
			'avatar socials buttons'
			'contacts contacts buttons';
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-rows: auto auto auto;
	`}

	${media.up('lg')`
		grid-template-areas:
			'greeting'
			'avatar'
			'socials'
			'contacts'
			'buttons';
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto auto;
	`}
`;

const Avatar = styled(Block)`
	grid-area: avatar;
`;

const Greeting = styled(Block)`
	grid-area: greeting;
`;

const Socials = styled(Block)`
	grid-area: socials;
`;

const Contacts = styled(Block)`
	grid-area: contacts;
`;

const Buttons = styled(Block)`
	grid-area: buttons;
`;