html, body {
	background: linear-gradient(to right, #9146FF 0%, #9146FF 50%, #1DA1F2 50%, #1DA1F2 100%);
	padding: 0;
	margin: 0;
	overflow: hidden;
}

img {
	height: 240px;
	margin: 10px;
	display: block;
	max-width: 300px;
}

.blocks {
	display: flex;
	height: 100vh;
}

.block {
	flex-basis: 0;
	transform: skew(-30deg, 0);
	/*skew(-45deg) translate(calc(-200px / (90/45)))*/
	display: flex;
	justify-content: center;
	align-items: center;
}

.block-content {
	transform: skew(30deg, 0);
}

img {
	width: 100%;
}

.block-1 img, .block-2 img, .block-3 img {
	transition: transform 200ms linear;
}

.block-1 {
	background: #9146FF;
	flex-grow: 1;
	padding: 10px;
}

.block-1:hover img {
	transform: scale(1.1);
}

.block-2 {
	background: #FF0000;
	flex-grow: 1.4;
	padding: 10px;
}

.block-2:hover img {
	transform: scale(1.1);
}

.block-3 {
	background: #1DA1F2;
	flex-grow: 1;
	padding: 10px;
}

.block-3:hover img {
	transform: scale(1.1);
}

@media(max-width: 1024px) {
    .block img {
        transform: scale(0.75);
    }
    
    .block:hover img {
        transform: scale(0.9);
    }
    
    .block-2 {
        flex-grow: 1.6;
    }
}

@media(max-width: 768px) {
	html, body {
		background: linear-gradient(to bottom, #9146FF 0%, #9146FF 50%, #1DA1F2 50%, #1DA1F2 100%);
		overflow-y: auto;
	}
	
	.blocks {
		flex-direction: column;
	}
	
	.block {
		transform: skew(0, -15deg);
	}

	.block-content {
		transform: skew(0, 15deg);
	}
	
	.block-2 {
		flex-grow: 1;
	}
}