/* 인트로: 카드 2장을 가로로 배치한다.
   클래스 이름은 기존 마크업 구조를 따르되 CMS 자동생성 번호(img__862375__, img__862385__)는
   의미 있는 이름(img__intro)으로 바꾼다. 번호는 CMS 내부값이라 재현할 이유가 없고,
   두 카드의 실제 CSS 내용은 번호만 다를 뿐 완전히 동일하다(원본
   reference/assets/www.ezrehabclinic.com/img_up/shop_pds/ez1095/build/page_inc/pc_71205.css 확인).

   그리드(.row/.col, 3px 거터)는 reference/assets/www.ezrehabclinic.com/admin/sub_build/build_inc/css/grid.css
   의 값을 따른다. 실측(Playwright boundingClientRect, 1920px 뷰포트)으로 카드 폭이
   정확히 (1920-3)/2 = 958.5px, 두 카드 사이 간격이 3px임을 확인했다. CMS 원본은
   negative margin + padding 트릭으로 이 값을 만들지만, CSS Grid의 gap이 정확히 같은
   결과를 내므로 이를 쓴다.

   실제 컬럼 전환 지점: grid.css 에서 d_col_3(50%)은 min-width:1024px, t_col_3(50%)은
   768~1023px, m_col_6(100%)은 max-width:767px 에 적용된다. 이 카드는 d_col_3 t_col_3 m_col_6
   세 클래스를 모두 갖고 있고 d_col_3/t_col_3 값이 둘 다 50%로 같으므로, 실제 전환점은
   768px 이다(1024px가 아니다). */

.intro_row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin: 0 0 60px;
}

@media all and (max-width: 767px) {
  .intro_row { grid-template-columns: 1fr; }
}

.img__intro { position: relative; }
.img__intro * { box-sizing: border-box; }
.img__intro > a { display: block; max-width: 100%; vertical-align: top; }
.img__intro .figure { display: block; }
.img__intro .figure img { width: 100%; vertical-align: top; }

.img__intro .caption_wrap {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
}
.img__intro .caption {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.img__intro .caption .caption_inner {
  display: table-cell;
  padding: 3% 5%;
  text-align: center;
  vertical-align: middle;
}
.img__intro .caption .cap_title {
  display: block;
  position: relative;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.3em;
}
.img__intro .caption .cap_title::before {
  content: '';
  position: absolute;
  right: 0; bottom: 0; left: 0;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #ffffff;
}
.img__intro .caption .cap_cont { display: none; }

@media all and (min-width: 768px) {
  .img__intro .caption .cap_title { font-size: 24px; }
}

@media all and (min-width: 1024px) {
  .img__intro { overflow: hidden; }
  .img__intro::before {
    content: '';
    position: absolute;
    top: 100%; right: 0; bottom: 0; left: 0;
    z-index: 0;
    background: #000000;
    opacity: .8;
  }
  .img__intro .caption .caption_inner { padding: 5% 12%; }
  .img__intro .caption .cap_title {
    top: 14px;
    padding-bottom: 15px;
    font-size: 26px;
    line-height: 1.3em;
  }
  .img__intro .caption .cap_title::before { width: 30px; }
  .img__intro .caption .cap_cont {
    display: block;
    position: relative;
    top: 14px;
    margin-top: 13px;
    font-size: 13px;
    color: #ffffff;
    opacity: 0;
  }

  .img__intro:hover::before { top: 0; }
  .img__intro:hover .caption .cap_title { top: 0; color: #ffffff; }
  .img__intro:hover .caption .cap_title::before { background: #ffffff; }
  .img__intro:hover .caption .cap_cont { top: 0; color: #ffffff; opacity: .8; }
}

@media all and (min-width: 1400px) {
  .img__intro .caption .cap_title { padding-bottom: 15px; font-size: 30px; }
  .img__intro .caption .cap_cont { margin-top: 15px; font-size: 18px; }
}