.lch-suites {
--lch-su-bg: #f4f0ea;
--lch-su-card: #ffffff;
--lch-su-ink: #2a2622;
--lch-su-muted: #5f584f;
--lch-su-gold: #9a7d55;
background: var(--lch-su-bg);
color: var(--lch-su-ink);
padding: clamp(3.25rem, 6.5vw, 5rem) 0;
}
.lch-suites__inner {
width: min(1180px, calc(100% - 3rem));
margin: 0 auto;
}
.lch-suites__header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.25rem, 3vw, 3rem);
align-items: end;
margin-bottom: clamp(2rem, 4vw, 2.85rem);
}
.lch-suites__eyebrow {
margin: 0 0 0.35rem;
font-family: "Great Vibes", "Cormorant Garamond", cursive !important;
font-weight: 400;
font-size: clamp(1.55rem, 2.6vw, 2.05rem);
line-height: 1;
color: var(--lch-su-gold);
}
.lch-suites__title,
.wpcursor-component.lch-suites .lch-suites__title,
.lch-suites h2.lch-suites__title {
margin: 0 !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2rem, 3.8vw, 2.85rem) !important;
line-height: 1.15 !important;
color: var(--lch-su-ink) !important;
}
.lch-suites__intro {
margin: 0;
font-family: "Outfit", system-ui, sans-serif;
font-weight: 300;
font-size: 0.98rem;
line-height: 1.7;
color: var(--lch-su-muted);
max-width: 34rem;
justify-self: end;
}
.lch-suites__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.2vw, 1.75rem);
}
.lch-suites__card {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(12.5rem, 0.95fr);
background: var(--lch-su-card);
overflow: hidden;
min-height: 22rem;
}
.lch-suites__media {
margin: 0;
position: relative;
min-height: 100%;
background: #d9d3c8;
overflow: hidden;
}
.lch-suites__image {
display: block;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center;
}
.lch-suites__body {
display: flex;
flex-direction: column;
padding: 1.35rem 1.25rem 1.4rem;
box-sizing: border-box;
}
.lch-suites__name,
.wpcursor-component.lch-suites .lch-suites__name,
.lch-suites h3.lch-suites__name {
margin: 0 0 1rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
line-height: 1.2 !important;
color: var(--lch-su-ink) !important;
}
.lch-suites__features {
list-style: none;
margin: 0 0 1.35rem;
padding: 0;
display: grid;
gap: 0.7rem;
flex: 1 1 auto;
}
.lch-suites__feature {
display: grid;
grid-template-columns: 1.25rem 1fr;
gap: 0.65rem;
align-items: start;
font-family: "Outfit", system-ui, sans-serif;
font-size: 0.84rem;
line-height: 1.35;
color: var(--lch-su-ink);
}
.lch-suites__feature-icon {
color: var(--lch-su-gold);
display: grid;
place-items: center;
padding-top: 0.05rem;
}
.lch-suites__cta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: auto;
align-self: flex-start;
text-decoration: none;
color: var(--lch-su-gold);
font-family: "Outfit", system-ui, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 0.25s ease, gap 0.25s ease;
}
.lch-suites__cta:hover,
.lch-suites__cta:focus-visible {
color: #7d6442;
gap: 0.75rem;
outline: none;
}
@media (max-width: 1100px) {
.lch-suites__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.lch-suites__header {
grid-template-columns: 1fr;
align-items: start;
}
.lch-suites__intro {
justify-self: start;
max-width: none;
}
.lch-suites__grid {
grid-template-columns: 1fr;
}
.lch-suites__card {
min-height: 18rem;
}
}
@media (max-width: 700px) {
.lch-suites__inner {
width: calc(100% - 1.5rem);
}
.lch-suites__card {
grid-template-columns: 1fr;
}
.lch-suites__media {
aspect-ratio: 4 / 3;
min-height: 0;
}
}