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

body.single.single-5ftf_pledge {

	// Expand archive content area to full-width of header.
	.site-content .site-main {
		max-width: $size__site-main;
	}

	.entry-header {
		margin: 0;
		padding-bottom: ms(4);
		text-align: center;

		@include breakpoint( $breakpoint-mobile ) {
			align-items: center;
		}

		@include breakpoint( 0, $breakpoint-mobile ) {
			text-align: center;
		}

		.pledge-introduction {
			background-color: $color-gray-light-200;
			padding: 1em;
			font-size: 1.5em;

			p {
				max-width: 525px; /* Keep it on two lines, ala https://stackoverflow.com/q/61923996/450127 */
				margin: 1em auto;

				&:first-child {
					margin-top: 0;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.pledge-status {
			display: inline-block;
			padding: 4px 12px;
			font-size: ms(-1);
			text-transform: uppercase;
			background-color: $color-error-red;
			color: white;
		}
	}

	.entry-title {
		margin-bottom: 0;
	}

	.has-post-thumbnail .pledge-introduction {
		padding-bottom: 2em;
	}

	.has-post-thumbnail .pledge-company-summary {
		position: relative;
		top: -30px;
	}

	.entry-image__logo {
		background: transparent;
		padding: 0;

		img {
			background-color: white;
			max-width: 330px;
			border-radius: 10px;
			border: 5px solid white;
		}
	}

	.entry-content {
		h2 {
			margin-top: 0;
		}

		@include breakpoint( $breakpoint-tablet ) {
			display: grid;
			grid-template-areas:
				"about contributions"
				"contributors contributors"
			;
			grid-template-columns: calc( 50% - 40px ) calc( 50% - 40px );
			grid-gap: 80px;

			.pledge-company-description {
				grid-area: about;
			}

			.pledge-company-contributions {
				grid-area: contributions;
			}

			.pledge-company-contributors {
				grid-area: contributors;
			}
		}
	}

	.team-grid {
		margin-top: ms(2);
	}

	.entry-footer {
		margin-top: ms(2);
		margin-bottom: ms(20);
		border-top: 1px solid $color-gray-light-500;
		padding-top: ms(2);

		.report-wrapper {
			margin-bottom: 1em;

			a {
				color: $color-alert-red;
			}
		}

		.edit-pledge-wrapper {
			text-align: right;

			p {
				font-size: ms(-2);
			}

			.button {
				padding-right: 4px;
				text-decoration: none;
				color: $color__wp-blue;
				font-size: 1rem;

				&:hover {
					border-bottom: 1px solid currentColor;
				}
			}
		}

		@include breakpoint( $breakpoint-tablet ) {
			display: flex;

			.report-wrapper {
				flex: 1 0 auto;
			}
		}
	}
}