/* شاشة صغيرة (افتراضي): 1، 2، 4 أسطر | شاشة كبيرة (768px+): 2، 3، 5 أسطر */

.clamp-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

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

.clamp-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

@media (min-width: 768px) {
  .clamp-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .clamp-subtitle {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .clamp-desc {
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }
}