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; } } } }