The Lantern House — Elegant Boutique_hotel Rooms Page for Divi 5

The Lantern House Rooms page opens with a full-bleed hero section built on a deep forest green (#0f1a15) background, layered with a Pexels photograph of an interior space and a 68% dark gradient overlay that keeps the cream typography legible without washing out the image. The heading sits at 56px Cormorant Garamond light on desktop, stepping down to 42px on tablet and 32px on mobile — a deliberate reduction baked into the module's responsive font settings rather than left to browser scaling. A breadcrumb text module in 13px Jost uppercase with 3px letter-spacing anchors the visitor in site hierarchy before they read a word of the headline. The subtext is constrained to a 600px max-width group, which stops the short tagline from stretching into uncomfortable line lengths on wide monitors.

The rates section uses a three-column equal-height row on a matching #0f1a15 background, with 24px column and row gaps and alignItems: stretch so all three cards grow to the same height regardless of content length. Each card sits inside a column with its own background color: deep forest green for the Garden Room and Attic Suite, and warm antique gold (#c9a45c) for the featured Merchant Room. The gold card carries a "Guest favourite" pill badge — a nested group with a dark green background and rounded 12px corners — and inverts its text to near-black #14110a throughout, so the contrast relationship between card and type remains consistent across all three. Pricing is set in 44px Cormorant Garamond bold, baseline-aligned next to a 15px "per night" label in Jost, giving the price a typographic weight that reads as confident without feeling aggressive. A thin top-border divider (1px solid, color-matched per card) separates the amenity checklist from the name and price block, and each amenity row pairs a 15px Font Awesome checkmark icon with a 16px Jost text module.

The photo gallery section introduces a two-column asymmetric header row — 14/24 for the heading column, 10/24 for the caption — aligned to flex-end so the shorter caption text sits at the baseline of the larger heading. Below that, a three-column image grid populates each column with two stacked images at alternating 4:5 and 4:3 aspect ratios, creating a deliberate rhythm of tall-short-tall across the row and preventing the grid from reading as a uniform tile wall. All images use objectFit: cover and have no border radius, which preserves the rectilinear editorial feel.

The amenities and FAQ sections both use the slightly lighter #16241d as a background, creating a subtle two-tone alternation across the page's lower half. The amenities list renders as a two-column CSS grid (gridColumnCount: 2, collapsing to one column on mobile) with icon-plus-text rows and consistent 14px vertical padding per item. The FAQ distributes six question-answer pairs across two equal columns, each question separated from its predecessor by a 2px solid #f2ede1 top border and 20px top padding — a deliberate choice that gives each entry breathing room without requiring extra wrapper elements.