.lch-logement-about {
--lch-la-bg: #f7f3ed;
--lch-la-ink: #2a2622;
--lch-la-muted: #5a534c;
--lch-la-gold: #9a7d55;
--lch-la-cta: #c6b49a;
position: relative;
isolation: isolate;
background: var(--lch-la-bg);
color: var(--lch-la-ink);
padding: clamp(2.75rem, 6vw, 4.75rem) 0;
font-family: "Outfit", system-ui, sans-serif;
}
.lch-logement-about__inner {
width: min(1180px, calc(100% - 3rem));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
gap: clamp(1.75rem, 4.5vw, 4rem);
align-items: center;
box-sizing: border-box;
}
.lch-logement-about--image-right .lch-logement-about__media {
order: 2;
}
.lch-logement-about--image-right .lch-logement-about__copy {
order: 1;
}
.lch-logement-about__media {
margin: 0;
overflow: hidden;
background: #d9d3c8;
aspect-ratio: 5 / 4;
}
.lch-logement-about__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.lch-logement-about__copy {
min-width: 0;
padding: 0.25rem 0;
}
.lch-logement-about__eyebrow {
margin: 0 0 0.9rem;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--lch-la-gold);
font-weight: 400;
}
.lch-logement-about__title,
.wpcursor-component.lch-logement-about .lch-logement-about__title,
.lch-logement-about h2.lch-logement-about__title {
margin: 0 0 1rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2rem, 3.5vw, 2.85rem) !important;
line-height: 1.15 !important;
color: var(--lch-la-ink) !important;
text-wrap: balance;
}
.lch-logement-about__rule {
display: block;
width: 3.25rem;
height: 1px;
margin: 0 0 1.35rem;
background: var(--lch-la-gold);
}
.lch-logement-about__text {
margin: 0 0 1rem;
max-width: 34rem;
font-weight: 300;
font-size: clamp(0.95rem, 1.35vw, 1.05rem);
line-height: 1.75;
color: var(--lch-la-muted);
}
.lch-logement-about__text:last-of-type {
margin-bottom: 1.6rem;
}
.lch-logement-about__cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-height: 2.85rem;
padding: 0.75rem 1.25rem;
background: var(--lch-la-cta);
color: var(--lch-la-ink);
text-decoration: none;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: none;
border-radius: 2px;
transition: background 0.25s ease, transform 0.25s ease;
}
.lch-logement-about__cta:hover,
.lch-logement-about__cta:focus-visible {
background: #b8a588;
transform: translateY(-1px);
outline: none;
}
@media (max-width: 900px) {
.lch-logement-about__inner {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.lch-logement-about--image-right .lch-logement-about__media,
.lch-logement-about--image-left .lch-logement-about__media {
order: 0;
}
.lch-logement-about--image-right .lch-logement-about__copy,
.lch-logement-about--image-left .lch-logement-about__copy {
order: 0;
}
.lch-logement-about__media {
aspect-ratio: 16 / 11;
}
}
@media (max-width: 700px) {
.lch-logement-about {
padding: 2.4rem 0;
}
.lch-logement-about__inner {
width: calc(100% - 2.3rem);
}
.lch-logement-about__cta {
width: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.lch-logement-about__cta {
transition: none;
}
}