components.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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