/*======================================================
hrī Collection Design System
Version 1.0
======================================================*/

/*==============================
RESET
==============================*/

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

html{
scroll-behavior:smooth;
font-size:16px;
}

body{

font-family:'Inter',sans-serif;

background:#F8F5F1;

color:#34261D;

line-height:1.75;

-webkit-font-smoothing:antialiased;

overflow-x:hidden;

}

img{

display:block;

width:100%;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

transition:.35s;

}

button{

font:inherit;

cursor:pointer;

background:none;

border:none;

}

/*==============================
ROOT
==============================*/

:root{

--cream:#F8F5F1;
--beige:#EFE6DA;
--white:#FFFFFF;

--brown:#4B3728;
--dark:#2E2118;

--gold:#B08A58;

--sage:#6E896C;
--sage-light:#DCE8D7;

--text:#635347;

--border:#E6DDD3;

--radius-sm:12px;
--radius:20px;
--radius-lg:28px;
--radius-xl:36px;

--shadow-sm:
0 8px 24px rgba(0,0,0,.04);

--shadow:
0 16px 45px rgba(0,0,0,.07);

--shadow-lg:
0 28px 70px rgba(0,0,0,.12);

--transition:.35s;

}

/*==============================
TYPOGRAPHY
==============================*/

h1,h2,h3,h4,h5{

font-family:

'Cormorant Garamond',

serif;

font-weight:500;

color:var(--dark);

}

h1{

font-size:72px;

line-height:1.08;

}

h2{

font-size:54px;

line-height:1.15;

}

h3{

font-size:30px;

}

p{

font-size:17px;

line-height:1.9;

color:var(--text);

}

small{

font-size:13px;

}

/*==============================
LAYOUT
==============================*/

.container{

width:min(1180px,92%);

margin:auto;

}

.section{

padding:120px 0;

}

.section-heading{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-label{

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:16px;

}

.section-intro{

max-width:700px;

margin:20px auto 0;

}

/*==============================
GRID
==============================*/

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.grid-3{

display:grid;

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

gap:30px;

}

.grid-4{

display:grid;

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

gap:28px;

}

/*==============================
BUTTONS
==============================*/

.btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 34px;

border-radius:999px;

transition:var(--transition);

font-size:14px;

letter-spacing:1px;

}

.btn-primary{

background:var(--sage);

color:white;

}

.btn-primary:hover{

background:#597255;

transform:translateY(-3px);

}

.btn-outline{

border:1px solid var(--gold);

color:var(--brown);

}

.btn-outline:hover{

background:var(--gold);

color:white;

}

/*==============================
CARDS
==============================*/

.card{

background:white;

border-radius:var(--radius);

box-shadow:var(--shadow-sm);

transition:var(--transition);

overflow:hidden;

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

/*==============================
IMAGES
==============================*/

.rounded{

border-radius:var(--radius-lg);

}

.shadow{

box-shadow:var(--shadow);

}

.cover{

object-fit:cover;

}

/*==============================
UTILITIES
==============================*/

.text-center{

text-align:center;

}

.mt-2{

margin-top:20px;

}

.mt-4{

margin-top:40px;

}

.mt-6{

margin-top:60px;

}

.mb-2{

margin-bottom:20px;

}

.mb-4{

margin-bottom:40px;

}

.mb-6{

margin-bottom:60px;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){

.grid-2{

grid-template-columns:1fr;

gap:60px;

}

.grid-3{

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

}

.grid-4{

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

}

h1{

font-size:58px;

}

h2{

font-size:44px;

}

}

@media(max-width:768px){

.section{

padding:90px 0;

}

.grid-3,

.grid-4{

grid-template-columns:1fr;

}

.container{

width:92%;

}

h1{

font-size:44px;

}

h2{

font-size:34px;

}

p{

font-size:16px;

}

.btn{

width:100%;

}

}