#gridList {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(10px, 1.56vw, 30px);
}
#gridList a {
  flex-direction: column;
  transition: 0.3s;
  height: 100%;
}
#gridList a:not(.no_img) {
  min-height: clamp(390px, 20.31vw, 390px);
}
#gridList a.no_img {
  background: #f8f8fb;
  border-radius: 10px;
  padding: clamp(20px, 1.82vw, 35px) clamp(20px, 1.56vw, 30px);
}
#gridList a.no_img:hover {
  filter: invert(100%);
}
#gridList a:not(.no_img) .cate {
  background: #f3f4f8;
}
#gridList a:not(.no_img):hover .img_box {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
#gridList a:not(.no_img):hover .img_box img {
  transform: scale(1.05);
}
#gridList a:not(.no_img):hover h4 {
  color: var(--color-point);
  letter-spacing: 0.02em;
}
#gridList .date {
  margin-top: auto;
}

/* ----------------------------- */
/* --------------RWD------------ */
/* ----------------------------- */
@media (max-width: 1200px) {
  #gridList a:not(.no_img) {
    min-height: clamp(310px, 20.31vw, 390px);
  }
}
@media (max-width: 850px) {
  #gridList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #gridList a:not(.no_img) {
    min-height: clamp(350px, 43.53vw, 370px);
  }
}
@media (max-width: 750px) {
  #gridList {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: clamp(15px, 8vw, 60px);
  }
  #gridList a:not(.no_img) {
    min-height: unset;
  }
  #gridList a.no_img {
    padding: clamp(20px, 5.33vw, 40px);
  }
}