.icable-popular-topics-container-title {
  margin-top: 32px;
  margin-bottom: 8px;
  color: #101820;
  border-left: 2px solid var(--brand-color);
  padding-left: 8px;
}

#popular-topics-single-page-shortcode .icable-popular-topics-container-title {
  margin-bottom: 16px;
}

.icable-popular-topics-container .popular-topics-title {
  color: #101820;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.icable-popular-topics-item {
  height: 100%;
}

#popular-topics-insert-container {
  display: inline-block;
}

.icable-popular-topics-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* set the width of each article card */
.icable-popular-topics-card {
  width: calc((100% - 32px)/3);
  height: auto;
  border: 1px solid #DEE2E6;
  border-radius: 8px;
  background-color: white;
}

.icable-popular-topics-info {
  height: 35%;
  display: flex;
  flex-direction: column;
}

.icable-popular-topics-info > div.icable-popular-topics-title {
  margin: 0;
  padding: 8px;
  flex: 1;
}

.icable-popular-topics-card .icable-popular-topics-info .i-cable-popular-topics-meta {
  padding: 8px;
  padding-top: 0;
  justify-content: unset;
  flex-wrap: wrap;
  display: flex;
}

.i-cable-popular-topics-meta .categories {
  color: #6C757D;
  line-height: 133%;
  list-style: none;
  border-right: 1px solid #DEE2E6;
  width: fit-content;
  margin-right: 8px;
  padding-right: 8px;
}

.i-cable-popular-topics-meta .categories .category-item {
  padding-bottom: 0;
}

.i-cable-popular-topics-meta .categories .category-item:last-child {
  padding: 0;
  margin: 0;
}

.i-cable-popular-topics-meta > .publish-date {
  font-weight: 400;
  font-size: 12px;
  line-height: 133%;
  color: #ADB5BD;
}

.icable-popular-topics-info .icable-popular-topics-title > a:hover, .i-cable-popular-topics-meta .categories > li > a:hover {
  text-decoration: none;
  color: var(--brand-color);
}

.icable-popular-topics-image > a > img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
}

/* 
 * Widget mode (listing format) 
 */
#i-cable-popular-topics-2 {
  order: 3
}

.popular-topics-widget-container .icable-popular-topics-container {
  gap: 8px;
}

.popular-topics-widget-container .icable-popular-topics-card {
  width: 100%;
  max-width: 100%;
  border: unset;
}

.popular-topics-widget-container .icable-popular-topics-info {
  height: unset;
  margin-left: 8px;
}

.popular-topics-widget-container .icable-popular-topics-item {
  height: unset;
  display: flex;
}

.popular-topics-widget-container .icable-popular-topics-image {
  min-width: 30%;
  max-width: 30%;
}

.popular-topics-widget-container .icable-popular-topics-image > a > img {
  border-radius: 0;
}

.popular-topics-widget-container .icable-popular-topics-card .icable-popular-topics-info .i-cable-popular-topics-meta {
  padding: unset;
  padding-top: 4px;
}

.popular-topics-widget-container .icable-popular-topics-info > div.icable-popular-topics-title {
  padding: 0;
  flex: 1;
}

/* Single page */
#popular-topics-single-page-widget {
  display: none;
}

/* Mobile Banner Ads */
.icpt-ads-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Breakpoint: Medium */
@media (max-width: 1056px) {
  .icable-popular-topics-container {
    gap: 8px;
  }

  #popular-topics-single-page-shortcode .icable-popular-topics-container-title {
    margin-bottom: 8px;
  }

  .icable-popular-topics-card {
    width: 100%;
    max-width: 100%;
    border: unset;
  }

  .icable-popular-topics-info {
    margin-left: 8px;
    height: unset;
  }

  .icable-popular-topics-item {
    display: flex;
    height: unset;
  }

  .icable-popular-topics-image {
    min-width: 30%;
    max-width: 30%;
  }

  .icable-popular-topics-image > a > img {
    border-radius: 0;
  }

  .icable-popular-topics-card .icable-popular-topics-info .i-cable-popular-topics-meta {
    padding: unset;
    padding-top: 4px;
  }

  .icable-popular-topics-info > div.icable-popular-topics-title {
    padding: 0;
  }
}

/* need to be updated after fixing the breakpoint issue */
@media (max-width: 991px) {
  #popular-topics-front-page-widget .icable-popular-topics-card {
    width: 49%;
  }
}

/* Breakpoint: Small */
@media (max-width: 672px) {
  #popular-topics-single-page-widget {
    display: block;
  }

  #popular-topics-single-page-shortcode {
    display: none;
  }

  #popular-topics-front-page-widget .icable-popular-topics-card {
    width: 100%;
  }
}