.bkbg-rhb-wrap { width: 100%; box-sizing: border-box; } .bkbg-rhb-inner { margin: 0 auto; box-sizing: border-box; } .bkbg-rhb-header { text-align: center; margin-bottom: 40px; } .bkbg-rhb-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; } .bkbg-rhb-heading { font-family: var(--bkrh-ht-font-family, inherit); font-size: var(--bkrh-ht-font-size-d, 34px); font-weight: var(--bkrh-ht-font-weight, 700); font-style: var(--bkrh-ht-font-style, normal); text-decoration: var(--bkrh-ht-text-decoration, none); text-transform: var(--bkrh-ht-text-transform, none); line-height: var(--bkrh-ht-line-height-d, 1.2); letter-spacing: var(--bkrh-ht-letter-spacing-d, normal); word-spacing: var(--bkrh-ht-word-spacing-d, normal); margin: 0 0 14px; } .bkbg-rhb-header h2.bkbg-rhb-heading { font-family: var(--bkrh-ht-font-family, inherit); font-size: var(--bkrh-ht-font-size-d, 34px); font-weight: var(--bkrh-ht-font-weight, 700); font-style: var(--bkrh-ht-font-style, normal); text-decoration: var(--bkrh-ht-text-decoration, none); text-transform: var(--bkrh-ht-text-transform, none); line-height: var(--bkrh-ht-line-height-d, 1.2); letter-spacing: var(--bkrh-ht-letter-spacing-d, normal); word-spacing: var(--bkrh-ht-word-spacing-d, normal); margin: 0 0 14px; } .bkbg-rhb-sub { font-family: var(--bkrh-st-font-family, inherit); font-size: var(--bkrh-st-font-size-d, 17px); font-weight: var(--bkrh-st-font-weight, 400); font-style: var(--bkrh-st-font-style, normal); text-decoration: var(--bkrh-st-text-decoration, none); text-transform: var(--bkrh-st-text-transform, none); line-height: var(--bkrh-st-line-height-d, 1.5); letter-spacing: var(--bkrh-st-letter-spacing-d, normal); word-spacing: var(--bkrh-st-word-spacing-d, normal); max-width: 620px; margin: 0 auto; } /* Filter pills */ .bkbg-rhb-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; } .bkbg-rhb-pill { border-radius: 24px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s, color 0.2s; } /* Grid */ .bkbg-rhb-grid { display: grid; gap: 22px; } .bkbg-rhb-card { border-radius: 14px; overflow: hidden; border-width: 1px; border-style: solid; transition: transform 0.2s, box-shadow 0.2s; } .bkbg-rhb-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.09); } .bkbg-rhb-card.hidden { display: none; } .bkbg-rhb-card-thumb { width: 100%; height: 140px; object-fit: cover; display: block; } .bkbg-rhb-card-placeholder { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 44px; } .bkbg-rhb-card-body { padding: 18px; } .bkbg-rhb-type-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 6px; } .bkbg-rhb-card-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; } .bkbg-rhb-card-desc { font-size: 14px; line-height: 1.55; margin-bottom: 14px; } .bkbg-rhb-card-cta { display: inline-block; border-radius: 7px; padding: 8px 16px; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity 0.2s; } .bkbg-rhb-card-cta:hover { opacity: 0.85; } /* Featured card (full width) */ .bkbg-rhb-card.featured { grid-column: 1 / -1; display: flex; flex-direction: row; } .bkbg-rhb-card.featured .bkbg-rhb-card-thumb { height: auto; width: 40%; max-width: 360px; flex-shrink: 0; } .bkbg-rhb-card.featured .bkbg-rhb-card-placeholder { width: 40%; max-width: 360px; height: auto; min-height: 180px; flex-shrink: 0; } .bkbg-rhb-card.featured .bkbg-rhb-card-body { flex: 1; padding: 28px; display: flex; flex-direction: column; justify-content: center; } .bkbg-rhb-card.featured .bkbg-rhb-card-title { font-size: 20px; } /* List layout */ .bkbg-rhb-grid.layout-list { grid-template-columns: 1fr; } .bkbg-rhb-grid.layout-list .bkbg-rhb-card:not(.featured) { display: flex; flex-direction: row; } .bkbg-rhb-grid.layout-list .bkbg-rhb-card:not(.featured) .bkbg-rhb-card-placeholder, .bkbg-rhb-grid.layout-list .bkbg-rhb-card:not(.featured) .bkbg-rhb-card-thumb { width: 120px; min-height: 100px; flex-shrink: 0; } @media (max-width: 1024px) { .bkbg-rhb-header .bkbg-rhb-heading { font-size: var(--bkrh-ht-font-size-t, var(--bkrh-ht-font-size-d, 34px)); line-height: var(--bkrh-ht-line-height-t, var(--bkrh-ht-line-height-d, 1.2)); letter-spacing: var(--bkrh-ht-letter-spacing-t, var(--bkrh-ht-letter-spacing-d, normal)); word-spacing: var(--bkrh-ht-word-spacing-t, var(--bkrh-ht-word-spacing-d, normal)); } .bkbg-rhb-sub { font-size: var(--bkrh-st-font-size-t, var(--bkrh-st-font-size-d, 17px)); line-height: var(--bkrh-st-line-height-t, var(--bkrh-st-line-height-d, 1.5)); letter-spacing: var(--bkrh-st-letter-spacing-t, var(--bkrh-st-letter-spacing-d, normal)); word-spacing: var(--bkrh-st-word-spacing-t, var(--bkrh-st-word-spacing-d, normal)); } } @media (max-width: 767px) { .bkbg-rhb-header .bkbg-rhb-heading { font-size: var(--bkrh-ht-font-size-m, var(--bkrh-ht-font-size-t, var(--bkrh-ht-font-size-d, 34px))); line-height: var(--bkrh-ht-line-height-m, var(--bkrh-ht-line-height-t, var(--bkrh-ht-line-height-d, 1.2))); letter-spacing: var(--bkrh-ht-letter-spacing-m, var(--bkrh-ht-letter-spacing-t, var(--bkrh-ht-letter-spacing-d, normal))); word-spacing: var(--bkrh-ht-word-spacing-m, var(--bkrh-ht-word-spacing-t, var(--bkrh-ht-word-spacing-d, normal))); } .bkbg-rhb-sub { font-size: var(--bkrh-st-font-size-m, var(--bkrh-st-font-size-t, var(--bkrh-st-font-size-d, 17px))); line-height: var(--bkrh-st-line-height-m, var(--bkrh-st-line-height-t, var(--bkrh-st-line-height-d, 1.5))); letter-spacing: var(--bkrh-st-letter-spacing-m, var(--bkrh-st-letter-spacing-t, var(--bkrh-st-letter-spacing-d, normal))); word-spacing: var(--bkrh-st-word-spacing-m, var(--bkrh-st-word-spacing-t, var(--bkrh-st-word-spacing-d, normal))); } } @media (max-width: 760px) { .bkbg-rhb-grid { grid-template-columns: 1fr !important; } .bkbg-rhb-card.featured, .bkbg-rhb-grid.layout-list .bkbg-rhb-card { flex-direction: column; } .bkbg-rhb-card.featured .bkbg-rhb-card-thumb, .bkbg-rhb-card.featured .bkbg-rhb-card-placeholder { width: 100%; max-width: 100%; min-height: 140px; } .bkbg-rhb-grid.layout-list .bkbg-rhb-card .bkbg-rhb-card-placeholder, .bkbg-rhb-grid.layout-list .bkbg-rhb-card .bkbg-rhb-card-thumb { width: 100%; } }