.lch-blog-intro {
--lch-bi-cream: #f6f1e8;
--lch-bi-ink: #1c1a18;
--lch-bi-body: #2a2622;
--lch-bi-gold: #c4a46a;
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--lch-bi-cream);
color: var(--lch-bi-ink);
font-family: "Outfit", system-ui, sans-serif;
padding: clamp(4.5rem, 10vw, 7.5rem) clamp(1.25rem, 4vw, 3rem);
box-sizing: border-box;
}
.lch-blog-intro__ornament {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
color: var(--lch-bi-gold);
opacity: 0.78;
width: clamp(5.5rem, 12vw, 9.5rem);
}
.lch-blog-intro__ornament--left {
left: clamp(0.25rem, 2.5vw, 2.75rem);
}
.lch-blog-intro__ornament--right {
right: clamp(0.25rem, 2.5vw, 2.75rem);
transform: translateY(-50%) scaleX(-1);
}
.lch-blog-intro__branch {
display: block;
width: 100%;
height: auto;
}
.lch-blog-intro__inner {
position: relative;
z-index: 1;
width: min(42rem, 100%);
margin: 0 auto;
text-align: center;
}
.lch-blog-intro__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin: 0 0 1.15rem;
font-size: 0.74rem;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--lch-bi-gold);
}
.lch-blog-intro__eyebrow::after {
content: "";
display: block;
width: 1.85rem;
height: 1px;
background: currentColor;
opacity: 0.95;
}
.lch-blog-intro__title,
.wpcursor-component.lch-blog-intro .lch-blog-intro__title,
.lch-blog-intro h2.lch-blog-intro__title {
margin: 0 0 1.35rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2.35rem, 4.6vw, 3.6rem) !important;
line-height: 1.12 !important;
letter-spacing: 0.01em !important;
color: var(--lch-bi-ink) !important;
text-wrap: balance;
}
.lch-blog-intro__text {
margin: 0 auto;
max-width: 38rem;
font-size: clamp(0.98rem, 1.35vw, 1.08rem);
font-weight: 300;
line-height: 1.75;
color: var(--lch-bi-body);
}
@media (max-width: 1100px) {
.lch-blog-intro__inner {
width: min(36rem, calc(100% - 8rem));
}
.lch-blog-intro__ornament {
width: clamp(3.5rem, 11vw, 5.5rem);
opacity: 0.5;
}
}
@media (max-width: 900px) {
.lch-blog-intro__ornament {
display: none;
}
.lch-blog-intro__inner {
width: min(42rem, 100%);
}
}
@media (max-width: 640px) {
.lch-blog-intro {
padding: 3.75rem 1.25rem 4.75rem;
}
.lch-blog-intro__text {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.lch-blog-intro__ornament {
transition: none;
}
}