@charset "utf-8";

/** 공통 **/
#kboard-layout.kboard-media {
  --grid-columns: 3;
  --grid-gap: 16px;
  --grid-gap-column-total: calc(var(--grid-gap) * calc(var(--grid-columns) - 1));
  --grid-item-width: calc(100% - var(--grid-gap-column-total));
}
#kboard-layout .kboard-grid__wrap {
  margin-top: var(--kboard-el-gap);
}
#kboard-layout .kboard-grid,
#kboard-layout .kboard-grid__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
#kboard-layout .kboard-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), calc(var(--grid-item-width) / var(--grid-columns)));
  gap: calc(var(--grid-gap) * 2) var(--grid-gap);
}
#kboard-layout .kboard-grid__item {
  display: block;
}
#kboard-layout .kboard-grid__link {
  display: block;
}
#kboard-layout .kboard-grid__thumbnail {
  overflow: hidden;
  border-radius: var(--kboard-board-r);
  margin-bottom: 8px;
}
#kboard-layout .kboard-grid__thumbnail img {
  display: block;
  transition: transform var(--kboard-ani-time);
}
#kboard-layout .kboard-grid__link:hover img,
#kboard-layout .kboard-grid__link:active img,
#kboard-layout .kboard-grid__link:focus img {
  transform: scale(1.1);
}
#kboard-layout .kboard-grid .kboard-title {
  font-size: var(--kboard-font-size-r);
}
#kboard-layout .kboard-grid__thumbnail .icon-picture {
  font-size: var(--kboard-font-size-s);
}
#kboard-layout .kboard-grid__contents {
  display: inline-block;
  font-size: var(--kboard-font-size-s);
  color: var(--kboard-color-grey);
}
#kboard-layout .kboard-grid__contents .contents-item:after {
  content: ' · ';
}
#kboard-layout .kboard-grid__contents .contents-item:last-child::after {
  display: none;
}
/* 문서 */
#kboard-layout .kboard-document-thumbnail {
  padding-top: 16px;
}
#kboard-layout .kboard-document-thumbnail img {
  display: block;
}

@media (max-width: 980px) {
  #kboard-layout.kboard-media {
    --grid-columns: 2;
  }
}
@media (max-width: 620px) {
  #kboard-layout.kboard-media {
    --grid-columns: 1;
  }
}