.xet-content__webzine > .item {
  display: flex;
}
.xet-content__webzine > .item .item__thumbnail {
  flex-shrink: 0;
}
.xet-content__webzine > .item .item__content_wrp {
  flex: 1;
}
.xet-content__webzine > .item .item__content_wrp > div + div {
  margin-top: 8px;
}

body.color_scheme_dark .xet-content__webzine > .item {
  border-color: var(--content-dark-border-color);
}

/* desktop
---------------------------------------------------------------------------- */
.xet-content__webzine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.xet-content__webzine > .item {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  position: relative;
  /* 오버레이 기준 */
  overflow: hidden;
  /* 넘치는 부분 잘라내기 */
}

.xet-content__webzine > .item .item__thumbnail {
  width: 100%;
  display: block;
}

.xet-content__webzine > .item .item__content_wrp {
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.6);
  /* 반투명 배경 */
  color: #fff;
  opacity: 0;
  /* 처음에는 숨김 */
  transition: opacity 0.4s ease;
  padding: 20px;
  display: flex;
  align-items: center;
  /* 중앙 정렬 */
  justify-content: center;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

.xet-content__webzine > .item:hover .item__content_wrp {
  opacity: 1;
  /* hover 시 나타남 */
}

.xet-content__webzine > .item:hover .item__content_wrp .subject {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  word-break: keep-all;
  white-space: normal;
  overflow-wrap: break-word;
}

.xet-content__webzine > .item .item__meta {
  margin-top: 10px;
  /* 필요하다면 그대로 유지 */
}

@media (max-width: 768px) {
  .xet-content__webzine {
    display: block;
  }

  .xet-content__webzine > .item {
    display: block;
    border: 1px solid #000;
    position: relative;
    margin-bottom: 15px;
  }
  .xet-content__webzine > .item:nth-child(3),
  .xet-content__webzine > .item:nth-child(4) {
    display: none;
  }
  .xet-content__webzine > .item .item__thumbnail {
    width: 100%;
    display: block;
  }

  .xet-content__webzine > .item .item__content_wrp {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0, 0, 0, 0.5);
    /* 반투명 배경 */
    color: #fff;
    opacity: 1;
  }
}