/* ========================= */
/* 배너 전체 영역 */
/* ========================= */

.banner-area {
  width: 100%;
  max-width: 1100px;
  margin: 26px auto 26px auto;
}

/* ========================= */
/* 그리드 설정 */
/* ========================= */

.banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

/* ========================= */
/* 배너 박스 */
/* ========================= */

.banner-grid a {
  display: block;
  overflow: hidden;
}

/* 이미지 */
.banner-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* 태블릿 모바일 */
@media (max-width: 1199px) {
  .banner-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .banner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}