.lch-heb-spot {
overflow-x: clip;
--lch-hs-panel: #2f342c;
--lch-hs-ink: #f4efe6;
--lch-hs-gold: #c2a57a;
--lch-hs-card: #f3eee6;
--lch-hs-card-ink: #2a2622;
display: grid;
grid-template-columns: minmax(18rem, 0.92fr) minmax(0, 1.35fr);
min-height: clamp(34rem, 72vh, 44rem);
background: var(--lch-hs-panel);
color: var(--lch-hs-ink);
overflow: visible;
}
.lch-heb-spot--image-left {
grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.92fr);
}
.lch-heb-spot--image-left .lch-heb-spot__panel {
order: 2;
}
.lch-heb-spot--image-left .lch-heb-spot__visual {
order: 1;
}
.lch-heb-spot__panel {
display: flex;
align-items: center;
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.75rem);
box-sizing: border-box;
background: var(--lch-hs-panel);
}
.lch-heb-spot__copy {
max-width: 28rem;
}
.lch-heb-spot__eyebrow {
margin: 0 0 1rem;
font-family: "Outfit", system-ui, sans-serif;
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--lch-hs-gold);
}
.lch-heb-spot__title,
.wpcursor-component.lch-heb-spot .lch-heb-spot__title,
.lch-heb-spot h2.lch-heb-spot__title {
margin: 0 0 0.75rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2.2rem, 4.2vw, 3.35rem) !important;
line-height: 1.08 !important;
color: #fff !important;
}
.lch-heb-spot__subtitle {
margin: 0 0 1.25rem;
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
line-height: 1.35;
color: rgba(244, 239, 230, 0.92);
}
.lch-heb-spot__text {
margin: 0 0 1.85rem;
font-family: "Outfit", system-ui, sans-serif;
font-weight: 300;
font-size: 0.95rem;
line-height: 1.7;
color: rgba(244, 239, 230, 0.82);
}
.lch-heb-spot__cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.85rem 1.35rem;
border: 1px solid var(--lch-hs-gold);
color: var(--lch-hs-gold);
text-decoration: none;
font-family: "Outfit", system-ui, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: background 0.25s ease, color 0.25s ease;
}
.lch-heb-spot__cta:hover,
.lch-heb-spot__cta:focus-visible {
background: var(--lch-hs-gold);
color: #2a2622;
outline: none;
}
.lch-heb-spot__visual {
position: relative;
min-height: clamp(26rem, 62vh, 44rem);
background: #1d211c;
}
.lch-heb-spot__main {
margin: 0;
position: absolute;
inset: 0;
overflow: hidden;
}
.lch-heb-spot__main-img,
.lch-heb-spot__inset-img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center;
}
.lch-heb-spot__inset {
position: absolute;
left: -2.5rem;
bottom: 2.25rem;
z-index: 2;
margin: 0;
width: min(15rem, 34%);
aspect-ratio: 4 / 5;
overflow: hidden;
border: 4px solid #fff;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
background: #d9d3c8;
}
.lch-heb-spot--image-left .lch-heb-spot__inset {
left: auto;
right: -2.5rem;
}
.lch-heb-spot__features {
position: absolute;
right: clamp(1rem, 3vw, 2rem);
top: 50%;
transform: translateY(-50%);
z-index: 3;
list-style: none;
margin: 0;
padding: 1.15rem 1.2rem;
width: min(15.5rem, 46%);
background: var(--lch-hs-card);
color: var(--lch-hs-card-ink);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
display: grid;
gap: 0.85rem;
}
.lch-heb-spot--image-left .lch-heb-spot__features {
right: auto;
left: clamp(1rem, 3vw, 2rem);
}
.lch-heb-spot__feature {
display: grid;
grid-template-columns: 1.35rem 1fr;
gap: 0.7rem;
align-items: start;
}
.lch-heb-spot__feature-icon {
color: #8d7350;
display: grid;
place-items: center;
padding-top: 0.1rem;
}
.lch-heb-spot__feature-label {
font-family: "Outfit", system-ui, sans-serif;
font-weight: 400;
font-size: 0.82rem;
line-height: 1.35;
}
@media (max-width: 980px) {
.lch-heb-spot,
.lch-heb-spot--image-left {
grid-template-columns: 1fr;
}
.lch-heb-spot--image-left .lch-heb-spot__panel,
.lch-heb-spot--image-left .lch-heb-spot__visual {
order: initial;
}
.lch-heb-spot__visual {
min-height: 28rem;
}
.lch-heb-spot__inset {
left: 1rem;
bottom: 1rem;
width: min(9.5rem, 32%);
}
.lch-heb-spot--image-left .lch-heb-spot__inset {
right: 1rem;
left: auto;
}
.lch-heb-spot__features {
position: relative;
top: auto;
right: auto;
left: auto;
transform: none;
width: calc(100% - 2rem);
margin: -3.5rem auto 1.5rem;
}
.lch-heb-spot--image-left .lch-heb-spot__features {
left: auto;
right: auto;
}
}
@media (max-width: 700px) {
.lch-heb-spot__panel {
padding: 2.25rem 1.25rem 2rem;
}
.lch-heb-spot__visual {
min-height: 22rem;
}
}