/* glass-coating 페이지 전용 스타일 — 공통 클래스는 common.css, 사용법은 src/pages/README.md */

.hero .btn-group { margin-top: 20px; }
.coating-hero-media { margin-left: 0; margin-right: 0; }

/* 행사가 묶음은 한 개뿐이라 넓은 화면에서 너무 퍼지지 않게 */
.coating-price { max-width: 560px; }
.coating-price-more { margin: 16px 0 0; }

/* 사진: 정사각 사진 2장 + 세로로 긴 사진 모음 2장, 화면 폭과 관계없이 2칸 */
.coating-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coating-photos .photo img { aspect-ratio: 1 / 1; }
.coating-photos .photo-collage img { aspect-ratio: 3 / 5; }

@media (min-width: 900px) {
  .hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .hero .container > * { grid-column: 1; }
  .hero .hero-badge { justify-self: start; }
  .hero .coating-hero-media { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
  .coating-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; gap: 12px; }
}