five-for-the-future/themes/wporg-5ftf/css/components/_about.scss

body.page-about {
	overflow-x: hidden;

	.entry-header {
		padding: ms( 4 ) ms( 1 );
		text-align: center;

		.entry-title {
			font-size: ms( 12 );
			line-height: 1;
			margin: 2rem auto 1rem;

			@include breakpoint( 0, 480px ) {
				font-size: ms( 10 );
			}
		}

		.entry-description {
			color: rgba( 255, 255, 255, 0.8 );
			font-size: ms( 2 );
			font-weight: 300;
			margin: -.4rem auto 2rem;
		}
	}

	.shapes {
		height: 480px;
		margin: 4rem 0;
		position: relative;

		.parallelogram {
			height: 260px;
			width: 310px;

			&:hover,
			&:focus,
			&:active {
				text-decoration: none;
			}

			&.technology {
				background-color: darken( #0073aa, 2% );
				top: 0;
				left: 0;
				z-index: 1;

				&:hover,
				&:focus,
				&:active {
					background-color: darken( #0073aa, 12% );;
				}
			}

			&.community {
				background-color: #67598e;
				right: 0;
				bottom: 0;

				&:hover,
				&:focus,
				&:active {
					background-color: darken( #67598e, 10% );
				}
			}

			h3, p {
				margin: 0;
				transform: skew( 15deg );
			}
		}

		@include breakpoint( 480px ) {
			height: 610px;

			.parallelogram {
				height: 336px;
				padding: 7rem 0;
				width: 400px;
			}
		}

		@include breakpoint( 640px ) {
			height: 580px;

			.parallelogram {
				height: 315px;
				padding: 5rem 0;
				width: 480px;

				&:before {
					font-size: ms( 14 );
					height: 84px;
					width: 84px;
				}
			}
		}

		@include breakpoint( 768px ) {
			height: 323px;
			margin: 4rem 0;

			.parallelogram {
				height: 282px;
				padding: 4rem 0;
				width: 430px;

				&.technology {
					left: auto;
					right: 45%;
					top: 40px;
				}

				&.community {
					bottom: auto;
					left: 45%;
				}
			}
		}

		@include breakpoint( 1024px ) {
			height: 420px;

			.parallelogram {
				height: 380px;
				padding: 6rem 0;
				width: 580px;

				&.technology {
					right: 43%;
				}

				&.community {
					left: 43%;
				}

				&:before {
					font-size: ms( 16 );
					height: 108px;
					width: 108px;
				}
			}
		}
	}

	.areas {
		h3 {
			@extend h4;
		}
	}
}