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; margin-bottom: 36px; padding: 30px; font-size: 1.1rem; p { max-width: 400px; /* Balance across two lines, ala https://stackoverflow.com/q/61923996/450127 */ margin: 0 auto 1rem auto; &:last-child { margin-bottom: 0; } } .pledge-introduction__more { font-size: .9rem; } } .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-top: 30px; margin-bottom: 0; } .has-post-thumbnail .pledge-introduction { padding-bottom: 60px; } .pledge-company-summary { h1 { font-size: 2.2rem; font-weight: 600; } .pledge-url { font-size: .9rem; margin-top: 18px; } } .has-post-thumbnail .pledge-company-summary { position: relative; top: -65px; } .entry-image__logo { background: transparent; padding: 0; img { background-color: white; max-width: 170px; max-height: 100px; box-sizing: content-box; border-radius: 3px; border: 12px 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; } } } }