/* Detail article: make desktop/tablet ads wider than col-1 but smaller than col-2 */
#portal .detail-article-container {
  width: 100%;
  max-width: 1440px;
}

#portal .detail-article-layout {
  --detail-article-ad-width: clamp(120px, 9vw, 170px);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #portal .detail-article-container {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #portal .detail-article-container {
    max-width: 720px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #portal .detail-article-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  #portal .detail-article-layout {
    flex-wrap: nowrap;
  }

  #portal .detail-article-layout .ads-desktop {
    flex: 0 0 var(--detail-article-ad-width);
    width: var(--detail-article-ad-width);
    max-width: var(--detail-article-ad-width);
  }

  #portal .detail-article-layout .article-main-column {
    max-width: 860px;
    min-width: 0;
  }
}