/* Catalog-only layout polish. Does not alter advertising markup or code. */
.premium-catalog > .section-grid {
  min-width: 0;
  align-items: start;
  column-gap: 13px;
  row-gap: 18px;
}
.premium-catalog > .section-grid > .catalog-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.premium-catalog > .section-grid .portrait-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
}
.premium-catalog > .section-grid .poster-play-center {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.premium-catalog > .section-grid .poster-title {
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.premium-catalog > .section-grid .poster-submeta {
  row-gap: 4px;
}
@media (max-width: 640px) {
  .premium-catalog > .section-grid {
    column-gap: 8px;
    row-gap: 11px;
  }
  .premium-catalog > .section-grid .poster-play-center {
    width: 38px;
    height: 38px;
  }
}

/* Shared 28-item catalog grids. Excludes homepage rails, player and advertising code. */
.premium-catalog[data-layout="balanced-28"] > .section-grid:has(.portrait-media-card) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: clamp(10px, 1vw, 14px);
  row-gap: clamp(14px, 1.5vw, 20px);
}
.premium-catalog[data-layout="balanced-28"] > .section-grid:not(:has(.portrait-media-card)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 13px;
  row-gap: 18px;
}
.premium-catalog[data-layout="balanced-28"] > .section-grid > .empty-state {
  grid-column: 1 / -1;
}
@media (max-width: 1319px) {
  .premium-catalog[data-layout="balanced-28"] > .section-grid:has(.portrait-media-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 759px) {
  .premium-catalog[data-layout="balanced-28"] > .section-grid:has(.portrait-media-card),
  .premium-catalog[data-layout="balanced-28"] > .section-grid:not(:has(.portrait-media-card)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 12px;
  }
}

/* Paginated editorial and live news: complete rows, no changes to articles or adverts. */
.news-listing[data-layout="balanced-28"] > .news-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.news-listing[data-layout="balanced-28"] > .news-grid > .empty-state {
  grid-column: 1 / -1;
}
@media (max-width: 1050px) {
  .news-listing[data-layout="balanced-28"] > .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .news-listing[data-layout="balanced-28"] > .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}