/* GENERAL CONTENT SECTION */
.content-section {
  padding: 60px 20px;
  background: #f2f2f2;
}

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

/* CARD */
.content-card {
  display: flex;
  flex-direction: column;
  border: 2px solid #0f7c2e;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: 0.3s ease;
}

.content-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

/* CONTENT */
.card-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-category {
  background:#f1c40f;
  padding:4px 8px;
  font-size:11px;
  width:fit-content;
  margin-bottom:6px;
  font-weight:bold;
}

.card-content h4 {
  font-size:14px;
  color:#038303;
  margin-bottom:6px;

  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.card-content p {
  font-size:12px;
  color:#444;

  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.card-footer {
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  padding-top:8px;
  border-top:1px solid #eee;
}

/* HOVER */
.content-card:hover {
  transform:translateY(-5px);
  box-shadow:0 6px 15px rgba(0,0,0,0.15);
  background:#0f7c2e;
}

.content-card:hover h4,
.content-card:hover p,
.content-card:hover span {
  color:#fff;
}

/* RESPONSIVE */
@media(max-width:1200px){
  .content-grid {
    grid-template-columns: repeat(3,1fr);
  }
}

@media(max-width:768px){
  .content-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:480px){
  .content-grid {
    grid-template-columns: 1fr;
  }
}