:root {
 --background: #f8f2ed;
 --cream: #fffaf6;
 --nude: #d2aa91;
 --nude-dark: #aa7c63;
 --gold: #bb926f;
 --brown: #4f3c33;
 --text: #66564e;
}

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

html {
 scroll-behavior: smooth;
}

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

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

header {
 min-height: 90px;

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

 padding: 0 6%;

 background: rgba(255,250,246,.96);

 border-bottom: 1px solid rgba(187,146,111,.2);
}

.symbol {
 font-family: "Playfair Display", serif;
 font-size: 25px;
 color: var(--gold);
}

.logo {
 font-family: "Playfair Display", serif;
 font-size: 35px;
 letter-spacing: 2px;

 color: #342a25;
 text-decoration: none;
}

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

nav a {
 color: var(--brown);
 text-decoration: none;

 text-transform: uppercase;

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

.booking {
 border: 1px solid var(--gold);

 padding: 13px 21px;

 text-decoration: none;

 color: var(--brown);

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

.hero {
 position: relative;

 min-height: 680px;

 display: flex;
 align-items: center;

 overflow: hidden;
}

.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(193,145,115,.91),
     rgba(201,160,135,.58) 43%,
     rgba(201,160,135,.04) 76%
   );
}

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

 margin-left: 8%;

 color: white;
}

.hero-copy > span {
 font-size: 10px;
 letter-spacing: 2.5px;
}

.hero h1 {
 font-family: "Playfair Display", serif;

 font-size: clamp(63px,7vw,103px);

 line-height: .91;

 margin: 23px 0;

 font-weight: 500;
}

.line {
 width: 55px;
 height: 1px;

 background: rgba(255,255,255,.75);

 margin-bottom: 20px;
}

.hero-copy p {
 line-height: 1.65;
 margin-bottom: 28px;
}

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

 padding: 14px 23px;

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

 color: white;

 text-decoration: none;

 font-size: 10px;

 letter-spacing: 1.3px;
}

.intro {
 padding: 110px 8%;

 display: grid;

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

 gap: 110px;

 background: var(--cream);
}

.tag {
 color: var(--gold);

 font-size: 10px;

 letter-spacing: 2.5px;

 margin-bottom: 22px;
}

.intro h2,
.gallery h2,
.contact h2 {
 font-family: "Playfair Display", serif;

 color: var(--brown);

 font-size: clamp(43px,5.5vw,72px);

 font-weight: 500;

 line-height: 1.04;
}

em {
 color: var(--nude-dark);
 font-weight: 500;
}

.description {
 max-width: 590px;

 margin-top: 28px;

 line-height: 1.8;

 color: #76665d;
}

.benefits {
 display: flex;
 justify-content: center;
 flex-direction: column;

 gap: 24px;

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

 color: var(--brown);
}

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

 display: grid;

 grid-template-columns:
   repeat(3,1fr);

 gap: 23px;

 background: var(--cream);
}

.services img {
 height: 400px;

 object-fit: cover;

 margin-bottom: 23px;
}

.services span {
 color: var(--gold);

 font-size: 11px;
}

.services h3 {
 display: inline-block;

 margin-left: 6px;

 font-size: 12px;

 letter-spacing: .7px;

 color: var(--brown);
}

.services article p {
 margin-top: 11px;

 font-size: 13px;

 line-height: 1.6;
}

.offer {
 text-align: center;

 padding: 95px 7%;

 background:
   linear-gradient(
     135deg,
     #ead6c9,
     #f5e8df
   );
}

.offer > p {
 font-size: 10px;

 letter-spacing: 3px;
}

.offer h2 {
 font-family: "Playfair Display", serif;

 color: var(--nude-dark);

 font-size: clamp(43px,6vw,68px);

 margin: 15px 0 7px;
}

.offer span {
 display: block;

 margin-bottom: 27px;
}

.offer a {
 color: var(--brown);

 border-color: var(--nude-dark);
}

.gallery {
 padding: 130px 8%;
}

.gallery-grid {
 margin-top: 55px;

 display: grid;

 grid-template-columns:
   1fr 1.25fr 1fr;

 gap: 18px;
}

.gallery-grid img {
 height: 510px;

 object-fit: cover;
}

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

.contact {
 padding: 120px 7%;

 text-align: center;

 background: var(--cream);
}

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

.contact a {
 background: var(--nude-dark);

 border: none;
}

footer {
 padding: 60px 7%;

 text-align: center;
}

.footer-logo {
 font-family: "Playfair Display", serif;

 font-size: 32px;

 letter-spacing: 3px;

 color: var(--brown);
}

footer p {
 color: var(--gold);

 margin: 11px 0 30px;
}

footer small {
 color: #96847a;
}

@media(max-width:900px) {

 nav,
 .symbol {
   display: none;
 }

 header {
   padding: 0 5%;
 }

 .booking {
   padding: 10px;
 }

 .hero {
   min-height: 680px;
 }

 .hero::after {
   background:
     rgba(184,132,103,.51);
 }

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

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

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

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

}