/*
 * Ads render at their image's natural size (e.g. 250x150), like the legacy
 * ad pages did, and only shrink when their space is narrower than the image.
 */
.bkrnt-ads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.bkrnt-ads__link {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.bkrnt-ads__image {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

/*
 * Horizontal: mirrors the legacy ads-4.aspx layout. Each ad gets an equal
 * column with the image centered in it (4 ads = 25% each), 2 per row below
 * 1120px and full width below 520px. --bkrnt-cols is set by the renderer to
 * the number of ads actually shown, so a lone ad is centered in the row.
 * Breakpoints are container queries: the legacy iframe's breakpoints measured
 * the iframe (i.e. the ad row), not the window.
 */
.bkrnt-ads--horizontal {
  container-type: inline-size;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.bkrnt-ads--horizontal .bkrnt-ads__link {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex: 0 0 calc(100% / var(--bkrnt-cols, 4));
  padding: 5px;
}

@container (max-width: 1120px) {
  .bkrnt-ads--horizontal .bkrnt-ads__link {
    flex-basis: max(50%, calc(100% / var(--bkrnt-cols, 4)));
  }
}

@container (max-width: 520px) {
  .bkrnt-ads--horizontal .bkrnt-ads__image {
    width: 100%;
  }
}