/**
 * ردیف «محبوب‌ترین دوره‌های دانش لند» در صفحه‌ی اصلی
 * (کدنیم: dl-popular-courses)
 *
 * کارت‌ها استایل خودشان را از dl-similar-courses.css می‌گیرند؛ این فایل
 * فقط قابِ بیرونی را می‌سازد تا ردیف دقیقاً هم‌عرض و هم‌فاصله‌ی بقیه‌ی
 * ردیف‌های صفحه‌ی اصلی بنشیند.
 */

.dl-popular {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding-block: 36px 12px;
  background: #ffffff;
}

.dl-popular__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

.dl-popular .dl-similar__head {
  margin-bottom: 18px;
}

.dl-popular .dl-similar__title {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.3px;
  color: #17161f;
}

/**
 * قیمتِ جانشین — توضیحش در inc/popular-courses.php است. در حالت عادی
 * dl-sales-mode.js این عنصر را برمی‌دارد و دکمه‌ی «نمایش دوره» را جایش
 * می‌گذارد؛ این قاعده فقط برای حالتی است که آن اسکریپت اجرا نشود.
 */
.dl-popular .dl-similar__price {
  display: none;
}

@media (max-width: 680px) {
  .dl-popular {
    padding-block: 26px 8px;
  }

  .dl-popular .dl-similar__title {
    font-size: 19px;
  }
}