.list__container{
  display: flex;
  flex-direction: column;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding: 8px;
  /* background-color:  6px 6px 12px #c5c5c5; */
}

.list__container__item{
  /* height: 40px; */
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-direction: column;
  /* gap: 20px; */

  /* border-bottom: 1px solid var(--ty-gray); */
  
  /* color: #090909;
  padding: 0.1em 0.1em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #f3f3f3; */
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(33.3333% - 20px);
}
.list__container__item a{
  
  display: flex;
  align-items: start;
  justify-content: space-between;
  justify-content: start;

  gap: 4px;
  width: 100%;
  /* background-color: antiquewhite; */
  flex-direction: column-reverse;
  /* flex-direction: row; */
  /* filter: grayscale(0%); */
  filter: grayscale(0%);
  /* width: 25%; */
}

.list__container__item a:hover{
  /* text-decoration: underline;
  text-decoration-color: var(--ty-black);
  text-underline-offset: 2px;
  opacity: 1.0; */
  cursor: pointer;

}
.list__container__item span{
  display: inline-block;   /* 또는 block */
  /* width: 33.3333%; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;

  align-items: start;
  justify-content: start;
}

.list__container__item span{
width: 100%;

  /* background-color: rebeccapurple; */
}

.list__container__item span:last-child{
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  display: flex;
  align-items: start;
  justify-content: start;
    /* background-color: rebeccapurple; */
  }

.list__container__item span img{ 
   /* max-height: 800px; */
  /* min-height: 300px; */
  /* max-height: 600px; */
  /* width: 600px; */
  height: 400px;
  object-fit: cover;
  /* background-color: rebeccapurple; */
}

.list__container__item__title{
  width: 40%;
}

.list__container__item__description{
  width: 30%;
}

.list__container__item__date{
  width: 10%;
}

@media (max-width: 768px) {
  .list__container{
    justify-content: space-around;
        gap: 10px;
        padding: 0px;

  }

  .list__container__item{
    /* height: 40px; */
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-direction: column;
    /* gap: 20px; */
  
    /* border-bottom: 1px solid var(--ty-gray); */
    
    /* color: #090909;
    padding: 0.1em 0.1em;
    font-size: 18px;
    border-radius: 0.5em;
    background: #e8e8e8;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.3s;
    box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #f3f3f3; */
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(50% - 10px);
  }
  .list__container__item span img{
    height: 200px;
  }

}
.list__container__item__thumbnail img{
  width: 100% ;
  max-width: 100% ;
}