.colorful-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(430px,42%) 1fr;
  min-height:620px;
  height:min(780px,calc(100svh - 88px));
  overflow:hidden;
  background:#101110;
  color:#f3eee4;
}
.colorful-hero>img{
  grid-column:2;
  width:100%;
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center center;
}
.colorful-hero__shade{
  position:absolute;
  inset:0 0 0 42%;
  background:linear-gradient(90deg,rgba(8,9,8,.32),rgba(8,9,8,0) 24%);
}
.colorful-hero__copy{
  position:relative;
  z-index:1;
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:auto;
  padding:58px clamp(42px,6vw,96px);
}
.colorful-hero__collection{
  margin:0 0 22px;
  color:#c7a96c;
  font:600 12px/1.4 Georgia,serif;
  letter-spacing:.24em;
}
.colorful-hero h1{
  margin:0 0 25px;
  color:#f5f0e7;
  font-size:clamp(44px,4.4vw,72px);
  font-weight:400;
  line-height:1.35;
  letter-spacing:.1em;
}
.colorful-hero__promise{
  margin:0 0 22px;
  color:#f5f0e7;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(19px,1.6vw,25px);
  line-height:1.8;
  letter-spacing:.08em;
}
.colorful-hero__promise span{display:block}
.colorful-hero__lead{
  margin:0;
  color:#d5cec2;
  font-size:15px;
  line-height:2;
  letter-spacing:.04em;
}
.colorful-hero__actions{
  display:flex;
  gap:12px;
  margin-top:34px;
}
.colorful-hero__actions .button{
  min-width:160px;
  padding:15px 22px;
  text-align:center;
}
.colorful-hero__actions .button.line{
  border-color:rgba(243,238,228,.62);
  color:#f3eee4;
}
.colorful-hero__statement{
  position:static;
  margin:38px 0 0;
  padding-top:25px;
  border-top:1px solid rgba(243,238,228,.18);
  color:#e8e0d4;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(18px,1.45vw,23px);
  font-weight:400;
  line-height:1.65;
  letter-spacing:.09em;
  text-align:left;
}
.colorful-hero__statement span{display:inline}
.colorful-intro{padding-top:100px}
.colorful-intro .eyebrow{margin-bottom:34px}

@media (max-width:1024px) and (min-width:901px){
  .colorful-hero{grid-template-columns:43% 57%;height:650px;min-height:0}
  .colorful-hero__copy{padding:42px 30px}
  .colorful-hero__shade{inset:0 0 0 43%}
  .colorful-hero__actions{display:grid}
  .colorful-hero__actions .button{min-width:0}
}

@media(max-width:900px){
  .colorful-hero{
    display:grid;
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .colorful-hero>img{
    grid-column:1;
    grid-row:1;
    height:auto;
    aspect-ratio:1/1;
    object-position:center center;
  }
  .colorful-hero__shade{display:none}
  .colorful-hero__copy{
    position:static;
    grid-column:1;
    grid-row:2;
    width:auto;
    transform:none;
    padding:34px 22px 46px;
    background:#101110;
  }
  .colorful-hero__collection{margin-bottom:17px;font-size:11px}
  .colorful-hero h1{margin-bottom:20px;font-size:clamp(36px,11vw,45px);letter-spacing:.07em}
  .colorful-hero__promise{font-size:19px;line-height:1.75}
  .colorful-hero__lead{font-size:14px;line-height:1.9}
  .colorful-hero__actions{flex-direction:column;margin-top:30px}
  .colorful-hero__actions .button{width:100%;min-width:0}
  .colorful-hero__statement{
    position:static;
    margin-top:24px;
    padding-top:0;
    border-top:0;
    color:#cfc6b7;
    font-size:18px;
    line-height:1.6;
    text-align:left;
  }
  .colorful-intro{padding-top:68px}
  .colorful-intro .eyebrow{margin-bottom:26px}
}

@media(min-width:761px) and (max-width:900px){
  .colorful-hero>img{aspect-ratio:3/2}
  .colorful-hero__copy{padding:42px 48px 50px}
  .colorful-hero__actions{grid-template-columns:repeat(2,minmax(0,1fr));flex-direction:row}
}