body.single.single-5ftf_pledge {

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

	.entry-header {
		margin: ms(12) 0;
		padding-bottom: ms(4);
		border-bottom: 1px solid $color-gray-light-500;

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

			> div {
				flex: auto;
			}

			.entry-image {
				max-width: 330px;
			}
		}

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

			.entry-image {
				margin-top: ms(2);
			}
		}
	}

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

	.entry-image__logo {
		background: transparent;
	}

	.pledge-company-description {
		max-width: $size__content-width;
	}

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

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

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

		@include breakpoint( $breakpoint-tablet ) {
			display: grid;
			grid-template-columns: 50% 50%;

			#toggle-management-link-form,
			#request-management-link {
				float: right;
				clear: both;
			}
		}
	}

	#request-management-link {
		width: 300px;
		border: 1px solid #ebeced; // setup var
		box-shadow: rgba(25, 30, 35, 0.1) 0 3px 30px;
		margin-top: 20px;
		padding: 15px;

		// todo add the upper ^ carot thing
			// border-radius or something to draw triangle
			// element inside the box, but then abs position outside it?
			// z-index above parent so it's above box-shadow - probably happens by default?

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

		input[type="email"] {
			width: 100%;
			margin: 0 0 20px 0;
		}

		input[type="submit"] {
			float: right;
			clear: both;
			margin-bottom: 20px;
		}

		#form-messages {
			clear: both;
		}
	}
}