.masonry{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC: 3열 */
  grid-auto-rows: 8px;                   /* 행 높이(단위 그리드) */
  gap: 16px;                             /* 아이템 간격 */
  align-items: start;
}

.item{
  /* JS가 grid-row-end로 세로 span을 설정함 */
  border: 1px solid #ddd;
  background: #fff;
}

.item-inner{
  box-sizing: border-box;
  padding: 12px;
}
.masonry.few{
  column-count: initial;     /* 컬럼 해제 */
  column-gap: 0;
  display: flex;             /* 가로 정렬 */
  flex-wrap: wrap;
  gap: 2em;
}
.masonry.few .item{
  margin: 0;                 /* flex에서 간격은 gap으로 */
  border: 1px #ddd solid;
  flex: 0 0 calc((100% - 2em * 2) / 3); /* 3칸 가로 배치 */
}
.item img{ max-width: 100%; display:block; height:auto; }
.item .caption {
    text-align: center;
    font-size: 19px;
    color: #000;
    padding-top: 18px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px;
}
@media only screen and (max-width: 320px) {
   .masonry{ grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 8px; }

}

@media only screen and (min-width: 321px) and (max-width: 768px) {
   .masonry{ grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 8px; }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .masonry{ grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 8px; }
}

@media(max-width:991px) {
     .masonry{ grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-rows: 8px; }
    .item .caption {
        text-align: center;
        font-size: 14px;
        color: #000;
        padding-top: 9px;
        padding-bottom: 9px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .item {
        padding: 0 !important;
        margin: 0 0 1em !important;
        width: 100%;
        -webkit-transition: 1s ease all;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        /* box-shadow: 2px 2px 4px 0 #ccc; */
        border: 1px #ddd solid;

    }
}