.bkbg-mdc-wrap { box-sizing: border-box; } .bkbg-mdc-inner { max-width: var(--mdc-max-width, 1100px); margin: 0 auto; padding: 0 24px; } /* === Eyebrow === */ .bkbg-mdc-eyebrow { text-align: center; font-family: var(--bkbg-mdc-ey-font-family, inherit); font-size: var(--bkbg-mdc-ey-font-size-d, 12px); font-weight: var(--bkbg-mdc-ey-font-weight, 700); font-style: var(--bkbg-mdc-ey-font-style, normal); line-height: var(--bkbg-mdc-ey-line-height-d, 1.4); letter-spacing: var(--bkbg-mdc-ey-letter-spacing-d, 0.1em); word-spacing: var(--bkbg-mdc-ey-word-spacing-d, normal); text-decoration: var(--bkbg-mdc-ey-text-decoration, none); text-transform: var(--bkbg-mdc-ey-text-transform, uppercase); display: block; } .bkbg-mdc-heading { text-align: center; font-family: var(--bkbg-mdc-hd-font-family, inherit); font-size: var(--bkbg-mdc-hd-font-size-d, 28px); font-weight: var(--bkbg-mdc-hd-font-weight, 700); font-style: var(--bkbg-mdc-hd-font-style, normal); line-height: var(--bkbg-mdc-hd-line-height-d, 1.3); letter-spacing: var(--bkbg-mdc-hd-letter-spacing-d, normal); word-spacing: var(--bkbg-mdc-hd-word-spacing-d, normal); text-decoration: var(--bkbg-mdc-hd-text-decoration, none); text-transform: var(--bkbg-mdc-hd-text-transform, none); margin-bottom: 28px; } /* === Logo row === */ .bkbg-mdc-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mdc-gap, 48px); margin-bottom: 40px; } .bkbg-mdc-logo-link { display: inline-flex; align-items: center; text-decoration: none; transition: opacity 0.2s ease, filter 0.25s ease; } .bkbg-mdc-logo-link:hover img, .bkbg-mdc-logo-link:hover .bkbg-mdc-logo-text { filter: none !important; opacity: 1; } .bkbg-mdc-logo-img { display: block; object-fit: contain; transition: filter 0.25s ease, opacity 0.2s ease; } .bkbg-mdc-logo-text { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; transition: filter 0.25s ease, opacity 0.2s ease; } /* === Featured quote === */ .bkbg-mdc-quote-wrap { max-width: 720px; margin: 0 auto 40px; padding: 28px 32px; border-radius: 12px; border-left-style: solid; border-left-width: 4px; } .bkbg-mdc-quote-text { font-family: var(--bkbg-mdc-qt-font-family, inherit); font-size: var(--bkbg-mdc-qt-font-size-d, 18px); font-weight: var(--bkbg-mdc-qt-font-weight, 400); font-style: var(--bkbg-mdc-qt-font-style, italic); line-height: var(--bkbg-mdc-qt-line-height-d, 1.6); letter-spacing: var(--bkbg-mdc-qt-letter-spacing-d, normal); word-spacing: var(--bkbg-mdc-qt-word-spacing-d, normal); text-decoration: var(--bkbg-mdc-qt-text-decoration, none); text-transform: var(--bkbg-mdc-qt-text-transform, none); margin: 0 0 12px; } .bkbg-mdc-quote-attribution { font-size: 13px; font-weight: 700; } .bkbg-mdc-quote-attribution a { color: inherit; text-decoration: none; } .bkbg-mdc-quote-attribution a:hover { text-decoration: underline; } /* Divider between logos and quote */ .bkbg-mdc-divider { border: none; border-top: 1px solid; margin: 32px auto; max-width: 200px; opacity: 0.5; } /* === Responsive === */ @media(max-width:1024px){ .bkbg-mdc-eyebrow { font-size: var(--bkbg-mdc-ey-font-size-t, var(--bkbg-mdc-ey-font-size-d, 12px)); line-height: var(--bkbg-mdc-ey-line-height-t, var(--bkbg-mdc-ey-line-height-d, 1.4)); letter-spacing: var(--bkbg-mdc-ey-letter-spacing-t, var(--bkbg-mdc-ey-letter-spacing-d, 0.1em)); word-spacing: var(--bkbg-mdc-ey-word-spacing-t, var(--bkbg-mdc-ey-word-spacing-d, normal)); } .bkbg-mdc-heading { font-size: var(--bkbg-mdc-hd-font-size-t, var(--bkbg-mdc-hd-font-size-d, 28px)); line-height: var(--bkbg-mdc-hd-line-height-t, var(--bkbg-mdc-hd-line-height-d, 1.3)); letter-spacing: var(--bkbg-mdc-hd-letter-spacing-t, var(--bkbg-mdc-hd-letter-spacing-d, normal)); word-spacing: var(--bkbg-mdc-hd-word-spacing-t, var(--bkbg-mdc-hd-word-spacing-d, normal)); } .bkbg-mdc-quote-text { font-size: var(--bkbg-mdc-qt-font-size-t, var(--bkbg-mdc-qt-font-size-d, 18px)); line-height: var(--bkbg-mdc-qt-line-height-t, var(--bkbg-mdc-qt-line-height-d, 1.6)); letter-spacing: var(--bkbg-mdc-qt-letter-spacing-t, var(--bkbg-mdc-qt-letter-spacing-d, normal)); word-spacing: var(--bkbg-mdc-qt-word-spacing-t, var(--bkbg-mdc-qt-word-spacing-d, normal)); } } @media(max-width:767px){ .bkbg-mdc-eyebrow { font-size: var(--bkbg-mdc-ey-font-size-m, var(--bkbg-mdc-ey-font-size-d, 12px)); line-height: var(--bkbg-mdc-ey-line-height-m, var(--bkbg-mdc-ey-line-height-d, 1.4)); letter-spacing: var(--bkbg-mdc-ey-letter-spacing-m, var(--bkbg-mdc-ey-letter-spacing-d, 0.1em)); word-spacing: var(--bkbg-mdc-ey-word-spacing-m, var(--bkbg-mdc-ey-word-spacing-d, normal)); } .bkbg-mdc-heading { font-size: var(--bkbg-mdc-hd-font-size-m, var(--bkbg-mdc-hd-font-size-d, 28px)); line-height: var(--bkbg-mdc-hd-line-height-m, var(--bkbg-mdc-hd-line-height-d, 1.3)); letter-spacing: var(--bkbg-mdc-hd-letter-spacing-m, var(--bkbg-mdc-hd-letter-spacing-d, normal)); word-spacing: var(--bkbg-mdc-hd-word-spacing-m, var(--bkbg-mdc-hd-word-spacing-d, normal)); } .bkbg-mdc-quote-text { font-size: var(--bkbg-mdc-qt-font-size-m, var(--bkbg-mdc-qt-font-size-d, 18px)); line-height: var(--bkbg-mdc-qt-line-height-m, var(--bkbg-mdc-qt-line-height-d, 1.6)); letter-spacing: var(--bkbg-mdc-qt-letter-spacing-m, var(--bkbg-mdc-qt-letter-spacing-d, normal)); word-spacing: var(--bkbg-mdc-qt-word-spacing-m, var(--bkbg-mdc-qt-word-spacing-d, normal)); } } @media (max-width: 640px) { .bkbg-mdc-logos { gap: 24px; } .bkbg-mdc-quote-wrap { padding: 20px; } }