components.js

const Sidebar = styled.div`
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto auto auto;

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

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

const Avatar = styled(Block)`
	grid-column: 1;
	grid-row: 1 / span 4;

	${media.up('md')`
		grid-column: 1;
		grid-row: 1 / span 2;
	`}

	${media.up('lg')`
		grid-column: 1;
		grid-row: 2;
	`}
`;

const Greeting = styled(Block)`
	grid-column: 2;
	grid-row: 1;

	${media.up('md')`
		grid-column: 2;
		grid-row: 1;
	`}

	${media.up('lg')`
		grid-column: 1;
		grid-row: 1;
	`}
`;

const Socials = styled(Block)`
	grid-column: 2;
	grid-row: 2;

	${media.up('md')`
		grid-column: 2;
		grid-row: 2;
	`}

	${media.up('lg')`
		grid-column: 1;
		grid-row: 3;
	`}
`;

const Contacts = styled(Block)`
	grid-column: 2;
	grid-row: 3;

	${media.up('md')`
		grid-column: 1 / span 2;
		grid-row: 3;
	`}

	${media.up('lg')`
		grid-column: 1;
		grid-row: 4;
	`}
`;

const Buttons = styled(Block)`
	grid-column: 2;
	grid-row: 4;

	${media.up('md')`
		grid-column: 3;
		grid-row: 1 / span 3;
	`}

	${media.up('lg')`
		grid-column: 1;
		grid-row: 5;
	`}
`;