:root { color: #42291b; background: #f5eee7; font-family: Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1220px; margin: 0 auto; padding: 28px; }
.hero { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #e7d3bf; }
.hero__copy { padding: clamp(42px, 7vw, 108px) clamp(30px, 6vw, 86px); display: flex; flex-direction: column; justify-content: center; }
.eyebrow { letter-spacing: .16em; font-size: 12px; margin: 0 0 18px; }
h1 { font-size: clamp(56px, 9vw, 118px); letter-spacing: .06em; font-weight: 400; margin: 0; line-height: .9; }
.lead { font-size: clamp(24px, 3vw, 36px); margin: 22px 0; }
.description { max-width: 470px; font-family: Arial, sans-serif; font-size: 17px; line-height: 1.6; }
.button { display: inline-block; align-self: flex-start; margin-top: 20px; padding: 17px 25px; background: #754321; color: #fff; text-decoration: none; font-family: Arial, sans-serif; font-size: 15px; }
.price { margin-top: 16px; font-family: Arial, sans-serif; font-size: 14px; }
.hero img { width: 100%; height: 100%; min-height: 650px; object-fit: cover; object-position: center; }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 36px 0 6px; font-size: 20px; }
.details p { margin: 0; }
@media (max-width: 720px) { main { padding: 0; } .hero { grid-template-columns: 1fr; } .hero img { min-height: 430px; max-height: 620px; } .details { grid-template-columns: 1fr; padding: 28px; } }