/* 공통 히어로 (1920x560, 딤 + 타이틀)
   사용법: <section class="sub-hero">
             <img class="sub-hero__img" src="...">
             <div class="sub-hero__dim"></div>
             <h1 class="sub-hero__tit" style="left: 854px; top: 302px;">Gallery</h1>
           </section>
   밝기: --hero-dim (기본 0.5 = 검정 50%) */
.sub-hero { position: absolute; top: 0; left: 0; width: 1920px; height: 560px; overflow: hidden; }
.sub-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--hero-pos-y, 35%); }
.sub-hero__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--hero-dim, 0.5)); }
.sub-hero__tit { position: absolute; font-family: 'Cormorant Infant', serif; font-weight: 600; font-size: 50px; line-height: 60.5px; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; white-space: nowrap; }

  html.is-m .sub-hero  { width: 360px; height: 400px; }
  html.is-m .sub-hero__tit  { font-size: 30px; line-height: 36px; }
  /* 모바일 전용 크롭(옵션) — 페이지에 .sub-hero__img--m을 함께 넣으면
     모바일에서만 그 이미지로 교체. 데스크톱 이미지 숨김은 페이지 CSS에서 */
  .sub-hero__img--m  { display: none; }
  html.is-m .sub-hero__img--m  { display: block; }