.db-hero.wp-block-cover {
min-height: min(92vh, 720px);
padding: 0;
color: var(--white); background-color: var(--ink);
} .db-hero.wp-block-cover > .wp-block-cover__inner-container {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 24px;
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--pad);
padding-top: 96px; padding-bottom: 20px;
} .db-hero__breadcrumb {
display: none;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.4);
}
.db-hero__breadcrumb a:hover,
.db-hero__breadcrumb .is-active {
color: var(--white);
}
.db-hero__breadcrumb .sep {
opacity: 0.6;
} .db-hero.wp-block-cover > .wp-block-cover__inner-container > .db-hero__breadcrumb {
margin-bottom: auto;
} .db-hero__title {
font-size: clamp(2.5rem, 11vw, 7.5rem); line-height: 1;
color: rgba(255, 255, 255, 0.8);
max-width: 16ch;
overflow-wrap: break-word; } .db-hero__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.db-hero__text {
font-size: 16px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.8);
max-width: 680px;
}
.db-hero__text a {
color: var(--white);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.6);
} @media (min-width: 861px) {
.db-hero__breadcrumb { display: flex; }
.db-hero.wp-block-cover {
min-height: 900px;
}
.db-hero.wp-block-cover > .wp-block-cover__inner-container {
gap: 32px;
padding-top: 120px;
padding-bottom: 48px;
}
.db-hero__meta {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
.db-hero__text { flex: 0 1 680px; }
.db-hero__meta .wp-block-buttons { flex: 0 0 auto; }
} .editor-styles-wrapper .db-hero.wp-block-cover > .wp-block-cover__inner-container {
padding-top: 48px;
} .db-hero--light {
background: var(--cream);
color: var(--ink);
min-height: 0;
}
.db-hero--light .db-hero__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
padding-top: 96px;
padding-bottom: 20px;
}
.db-hero--light .db-hero__title { color: var(--ink); line-height: 1.05; } .db-hero--light .db-hero__breadcrumb {
display: flex;
margin-bottom: 0;
font-size: 12px;
line-height: 16px;
color: var(--muted);
}
.db-hero--light .db-hero__breadcrumb a:hover,
.db-hero--light .db-hero__breadcrumb .is-active { color: var(--ink); }
@media (min-width: 861px) {
.db-hero--light .db-hero__inner { gap: 60px; padding-top: 136px; padding-bottom: 48px; }
.db-hero--light .db-hero__title { font-size: 7.5rem; line-height: 1; }
.db-hero--light .db-hero__breadcrumb { font-size: 14px; line-height: 20px; }
}