.grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

.grid {
  width: 100%;
background: #ffffff;
}

.grid .item {

  background: white;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  padding: 20px;
  height: 500px;
  overflow: auto;
        
}

.recommendation-box {

}

.text {text-align:left;}

.preview-thumbnail{
max-width: 50%;
}

.story {
    grid-template-columns: 1fr 1fr;
}
.story img {
    width: 150px;
}

.item-story{}
  
.item-story{
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .item-story img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .item-story img:hover {
            transform: scale(1.05);
        }

.item img{}
.item a {
  padding: 5px 15px;
  background: #000127;
  color: #fff;
  transition: 0.4s ease;
  font-size: 15px;
  overflow: hidden;
  transition: ease-in 0.1s;
}
.item a:hover {
  background: transparent;
  color: #7aba20;
}

.detail-text{
font-size: 14px;
padding: 0 0 5px 5px;
}
.detail-text b{
color: #193578;
}
.detail-text a {
padding: none;
color: #607b4b;
background: none;
}


    @media only screen and (max-width: 600px) {
      .filterbox {width: 100%;}
      .grid {width: 100%}
      .grid .item {width: 48%; display: inline-block; gap: 2px; font-size: 11px;}
      }