@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;
  border: 1px solid var(--kboard-color-line);
}
#kboard-layout .kboard-grid__link {
  display: block;
}
#kboard-layout .kboard-grid__thumbnail {
  overflow: hidden;
  /* border-radius: var(--kboard-board-r); */
}
#kboard-layout .kboard-grid__thumbnail img {
  display: block;
  transition: transform var(--kboard-ani-time);
  width: 100%;
}
#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-grid__info{
  color: var(--kboard-color-black);
  padding: 24px 28px 28px;
}
#kboard-layout .kboard-grid__info .info-category{
  display: inline-block;
  background: var(--kboard-color-point);
  color: #fff;
  padding: 4px 20px;
  font-size: clamp(14px, 1.5vw, 16px);
}
#kboard-layout .kboard-grid__info .info-loca{
  font-size: clamp(16px, 1.7vw, 18px);
  margin: 10px 0 12px;
}
#kboard-layout .kboard-grid__info .kboard-title{
  font-size: clamp(18px, 2vw, 24px); font-weight: 700;
}
/* 문서 */
#kboard-layout .kboard-document-thumbnail {
  padding-top: 16px;
}
#kboard-layout .kboard-document-thumbnail img {
  display: block;
}
#kboard-layout.kboard-media .kboard-document-category li,
#kboard-layout.kboard-media .kboard-document-tree-category li {
  background: var(--kboard-color-point);
  color: #fff;
}

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