@charset "utf-8";

/* ===== 영상디스플레이 & 네트워크 솔루션 =====
   index.php에서 <div class="vns_grid"> ... </div> 래퍼를 만들고,
   latest('basic', bo_table, 2, ...)를 4번 호출하면
   카드가 한 그리드 안에 이어서 출력됩니다.
*/

/* 4열(PC) / 2열(태블릿) / 1열(모바일) */
.vns_grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

/* 카드 박스 */
.vns_card{
  display:block;
  background:#fff;
  border:3px solid #e6ebf1;
  text-decoration:none;
  overflow:hidden;
}

/* 썸네일 영역 */
.vns_thumb{
  background:#fff;
  padding: 18px 14px 12px;
  height: 220px;                 /* PC 기준 높이 */
  display:flex;
  align-items:center;
  justify-content:center;
}
.vns_thumb img{
  max-width:100%;
  max-height:100%;
  height:auto;
}

/* 하단 버튼형 타이틀 */
.vns_btn{
  margin: 0 14px 14px;
  padding: 14px 10px;
  background:#2f63b8;            /* 버튼 느낌 */
  color:#fff;
  text-align:center;
  font-weight:800;
  font-size: 15px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* hover */
.vns_card:hover .vns_btn{
  filter: brightness(0.95);
}

/* 반응형 */
@media (max-width: 991px){
  .vns_grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vns_thumb{ height: 210px; }
}
@media (max-width: 575px){
  .vns_grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .vns_thumb{ height: 200px; padding: 16px 12px 10px; }
  .vns_btn{ margin: 0 12px 12px; padding: 13px 10px; font-size: 12.5px; }
}