:root{
  --brand:#631D1F;
  --brand-dark:#4a1517;
  --ink:#1a1614;
  --muted:#6b6560;
  --line:#e8e4de;
  --bg-soft:#f7f5f1
}

html{ scroll-behavior:smooth }

body {
  font-family: 'Montserrat Alternates', sans-serif;
  background:#fff;
  -webkit-font-smoothing:antialiased
}

/* ==== HERO SECTION === */
.hero {
  position: relative;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;

  background-image: url("../images/hero/hero-bg-mobile.webp");
  min-height: 100svh;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0.2) 60%,
    rgba(0,0,0,0.65) 100%
  );
  z-index: 1;
}

 
/* tablet */
@media (min-width: 480px) {
  .hero {
    background-image: url("../images/hero/hero-bg-768.webp");
    min-height: 56vw;
  }
}

/* small laptop */
@media (min-width: 768px) {
  .hero {
    background-image: url("../images/hero/hero-bg-1024.webp");
    min-height: 50vw;
  }
}

/* desktop */
@media (min-width: 1024px) {
  .hero {
    background-image: url("../images/hero/hero-bg-1440.webp");
    min-height: 70vw;
  }
}

/* large screens */
@media (min-width: 1440px) {
  .hero {
    background-image: url("../images/hero/hero-bg-1920.webp");
    min-height: 40vw;
  }
}