:root {
 --bg: #f8f1ed;
 --cream: #fffaf7;
 --rose: #c98f80;
 --rose-dark: #ad7466;
 --peach: #dfb5a7;
 --brown: #5c4039;
 --text: #554943;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 background: var(--bg);
 color: var(--text);
 font-family: "Inter", sans-serif;
}

img {
 width: 100%;
 display: block;
}

header {
 min-height: 90px;

 display: flex;
 justify-content: space-between;
 align-items: center;

 padding: 0 6%;

 background: rgba(255,250,247,.95);

 border-bottom: 1px solid rgba(201,143,128,.22);
}

.logo {
 font-family: "Playfair Display", serif;
 color: var(--rose-dark);
 text-decoration: none;
 font-size: 34px;
 letter-spacing: 2px;
}

.mini-logo {
 width: 38px;
 height: 38px;

 display: grid;
 place-items: center;

 border: 1px solid var(--peach);
 border-radius: 50%;

 text-decoration: none;
 color: var(--rose-dark);
}

nav {
 display: flex;
 gap: 28px;
}

nav a {
 color: var(--brown);
 text-decoration: none;
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 1.5px;
}

.booking {
 border: 1px solid var(--rose);
 padding: 13px 20px;

 color: var(--brown);
 text-decoration: none;

 font-size: 10px;
 letter-spacing: 1.4px;
}

.hero {
 min-height: 660px;

 position: relative;
 overflow: hidden;

 display: flex;
 align-items: center;
}

.hero > img {
 position: absolute;
 inset: 0;

 width: 100%;
 height: 100%;

 object-fit: cover;
}

.hero::after {
 content: "";
 position: absolute;
 inset: 0;

 background:
   linear-gradient(
     90deg,
     rgba(187,125,110,.94) 0%,
     rgba(196,139,124,.73) 40%,
     rgba(196,139,124,.06) 73%
   );
}

.hero-text {
 position: relative;
 z-index: 2;

 margin-left: 8%;
 color: white;
}

.hero-text > span,
.tag {
 font-size: 10px;
 letter-spacing: 2.6px;
}

.hero h1 {
 font-family: "Playfair Display", serif;
 font-size: clamp(65px,7vw,105px);
 line-height: .9;
 margin: 25px 0;
 font-weight: 500;
}

.hero-text p {
 line-height: 1.7;
 margin-bottom: 27px;
}

.hero-text a,
.offer a,
.contact a {
 display: inline-block;

 border: 1px solid rgba(255,255,255,.75);

 color: white;
 text-decoration: none;

 padding: 14px 23px;

 font-size: 10px;
 letter-spacing: 1.5px;
}

.intro {
 padding: 110px 8%;

 display: grid;
 grid-template-columns: 1.2fr .7fr;

 gap: 100px;

 background: var(--cream);
}

.tag {
 color: var(--rose-dark);
 margin-bottom: 22px;
}

.intro h2,
.gallery h2,
.contact h2 {
 font-family: "Playfair Display", serif;
 color: var(--brown);

 font-size: clamp(42px,5vw,70px);
 line-height: 1.05;
 font-weight: 500;
}

em {
 color: var(--rose-dark);
 font-style: italic;
 font-weight: 500;
}

.description {
 max-width: 590px;
 margin-top: 28px;

 line-height: 1.8;
 color: #74645d;
}

.features {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 25px;

 color: var(--brown);

 font-size: 11px;
 letter-spacing: 1px;
}

.services {
 padding: 90px 8% 130px;

 display: grid;
 grid-template-columns: repeat(3,1fr);
 gap: 24px;

 background: var(--cream);
}

.services img {
 height: 400px;
 object-fit: cover;
 margin-bottom: 23px;
}

.services span {
 color: var(--rose);
 font-size: 11px;
}

.services h3 {
 display: inline-block;
 margin-left: 5px;
 color: var(--brown);
 font-size: 12px;
 letter-spacing: 1px;
}

.services article > p {
 color: #74645d;
 font-size: 13px;
 line-height: 1.6;
 margin-top: 10px;
}

.offer {
 padding: 100px 7%;
 text-align: center;

 background:
   linear-gradient(
     135deg,
     #e9c8bd,
     #f6e8e2
   );
}

.offer span {
 font-size: 10px;
 letter-spacing: 3px;
}

.offer h2 {
 font-family: "Playfair Display", serif;
 font-size: clamp(45px,6vw,70px);

 color: var(--rose-dark);

 margin: 15px 0;
}

.offer p {
 margin-bottom: 27px;
}

.offer a {
 border-color: var(--rose-dark);
 color: var(--rose-dark);
}

.gallery {
 padding: 130px 8%;
}

.gallery > div {
 margin-top: 50px;

 display: grid;
 grid-template-columns: 1fr 1.2fr 1fr;
 gap: 18px;
}

.gallery img {
 height: 520px;
 object-fit: cover;
}

.gallery img:nth-child(2) {
 margin-top: 60px;
}

.contact {
 text-align: center;
 padding: 120px 7%;
 background: var(--cream);
}

.contact h2 {
 margin-bottom: 40px;
}

.contact a {
 background: var(--rose-dark);
 border: none;
}

footer {
 padding: 60px;
 text-align: center;
}

footer span {
 font-family: "Playfair Display", serif;
 font-size: 30px;
 color: var(--rose-dark);
}

footer p {
 margin: 10px 0 30px;
 color: var(--rose);
}

footer small {
 color: #94827a;
}

@media(max-width:900px) {

 nav,
 .mini-logo {
   display: none;
 }

 header {
   padding: 0 5%;
 }

 .booking {
   padding: 10px;
 }

 .hero {
   min-height: 670px;
 }

 .hero::after {
   background: rgba(176,112,98,.55);
 }

 .intro {
   grid-template-columns: 1fr;
   gap: 50px;
 }

 .services {
   grid-template-columns: 1fr;
 }

 .gallery > div {
   grid-template-columns: 1fr;
 }

 .gallery img,
 .gallery img:nth-child(2) {
   margin: 0;
   height: 420px;
 }

}