@font-face{
  font-family:"Buixots";
  src:
    url("fonts/Buixots.woff2") format("woff2"),
    url("fonts/Buixots.woff") format("woff");
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:system-ui, Arial, sans-serif;
  background:#ffffff;
  color:#111;
}

a{
  text-decoration:none;
  color:inherit;
}

/* HEADER */

.topbar{
  max-width:1320px;
  margin:0 auto;
  padding:20px;
}

.brand-title{
  font-family:"Buixots", system-ui, sans-serif;
  color:#111;
  font-size:clamp(2.25rem, 6vw, 2.5rem);
  line-height:1.1;
  text-transform:uppercase;
}

/* MAIN */

.main{
  max-width:900px;
  margin:0 auto;
  padding:20px;
}

/* HERO */

.hero{
  text-align:center;
  margin-bottom:40px;
}

.hero img{
  display:block;
  margin:0 auto;
  max-width:100%;
}

/* INTRO */

.intro h1{
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.09rem;
  margin-bottom:30px;
}

.intro-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:60px;
}

.text p{
  margin-bottom:18px;
  line-height:1.4;
    font-size:0.9rem;
}

.details p{
  margin-bottom:16px;
  line-height:1.4;
    font-size:0.9rem;
}

/* BACK */

.back{
  margin-top:30px;
}

/* GALLERY */

.gallery{
  margin-top:60px;
  text-align:center;
}

.gallery img{
  display:block;
  margin:0 auto 30px auto;
  max-width:100%;
}

/* FOOTER */

.footer{
  text-align:center;
  padding:30px 20px;
  font-size:0.9rem;
  color:#777;
}

/* RESPONSIVE */

@media (max-width:900px){
  .intro-grid{
    grid-template-columns:1fr;
  }
}