/* Keep the campaign in proportion on desktop, including short laptop screens. */
@media (min-width:701px) {
  .hero {
    --hero-height:min(760px,56.25vw,90svh);
    width:min(100%,1920px);
    margin-inline:auto;
    background:#542016;
  }
  .hero-grid {
    width:100%;
    grid-template-columns:minmax(0,1fr) calc(var(--hero-height) * 1.12962963);
    height:var(--hero-height);
    min-height:0;
    aspect-ratio:auto;
    margin-inline:auto;
  }
  /* Only the cleaned brown panel is shown; the original product art stays intact. */
  .hero-grid::before {
    content:'';
    position:absolute;
    inset:0 calc(var(--hero-height) * 1.12962963 - 24px) 0 0;
    padding-right:24px;
    background:url('assets/hero-kv-clean-background-v10.png') left top/274.285714% 100% no-repeat;
    background-origin:content-box;
    pointer-events:none;
  }
  .hero-campaign-visual {
    background:none;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 24px);
    mask-image:linear-gradient(to right,transparent,#000 24px);
  }
  .hero::after { height:12px; }
  .hero-copy {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:calc(100% - 48px);
    max-width:380px;
    padding:0;
    margin:auto;
  }
  .hero-brands {
    width:100%;
    gap:clamp(6px,calc(var(--hero-height) * .013),10px);
    margin:0 0 clamp(10px,calc(var(--hero-height) * .022),17px);
  }
  .hero-brands .brand-kobber-image {
    width:min(160px,calc(var(--hero-height) * .27),64%);
    height:auto;
  }
  .hero-brands img { width:min(210px,calc(var(--hero-height) * .34),84%); }
  .hero-copy h1 { width:min(100%,340px,calc(var(--hero-height) * .48)); margin:0; }
  .hero h1 .hero-kicker {
    font-size:clamp(16px,calc(var(--hero-height) * .039),28px);
    line-height:1.16;
    letter-spacing:-.025em;
  }
  .hero h1 .hero-lettering-frame {
    display:block;
    position:relative;
    width:100%;
    aspect-ratio:1392/862;
    overflow:hidden;
    margin:3px auto 0;
  }
  .hero-lettering-frame .hero-lettering {
    position:absolute;
    width:110.344828%;
    max-width:none;
    height:auto;
    left:-5.172414%;
    top:-9.396752%;
    margin:0;
  }
  .hero-description {
    font-size:clamp(16px,calc(var(--hero-height) * .038),27px);
    line-height:1.2;
    letter-spacing:-.015em;
    margin:5px 0 0;
  }
}