/* One width for every block on the page.

The house keeps its content in one column of 1280px, but a few blocks broke
out of it: the comparison table on BOF2 was set to the full width of the
screen, the notes under the matrix and the list of account types were never
given a width at all, the list of questions was narrowed to 900px, and the
rail of profiles with the panel of picks lost their container. Every block
below is put back into the same column as the rest of the page.
*/
main > section > .bf-table-wrap,
main > section > .bf-section__notes,
main > section > .service-list {
  max-width: var(--max);
  margin-inline: auto;
}
.bf-faq__list {
  max-width: var(--max);
}
.bf-shelf,
.bf-topboard {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 20px 0;
}

/* The disclosure block on the niche and service pages was 1080px wide and
   stuck out of the article column. It now takes the width of the column and
   stands on its left edge, the same as the article itself. */
.bf-page .disclosure {
  max-width: 880px;
  margin-left: max(0px, calc((100% - var(--max)) / 2));
  margin-right: 0;
  margin-bottom: 28px;
  padding: 26px 28px;
}

/* The photos of the "Top of the board" panel.

The photo was taller than the tile it sits in, and the tile only showed the
top strip of it, so the models looked flat and cut. The photo now covers the
whole tile, and the tiles are portrait like the photos themselves.
*/
.bf-panel__list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: auto;
}
/* The height of the tile has to be a definite number, otherwise the photo
   inside it keeps its own proportions and only a strip of it shows. The photo
   is therefore given the same height as the tile it sits in. The priority
   mark is needed: the house sets the height of every picture on the page with
   a rule that is stronger, so without it the photo keeps its own ratio. */
.bf-bento__item { height: 260px; }
.bf-bento__item--lead { height: 529px; }
.bf-bento__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 260px !important;
  object-fit: cover;
  object-position: center top;
}
.bf-bento__item--lead img { height: 529px !important; }
@media (max-width: 760px) {
  .bf-panel__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .bf-bento__item { height: 200px; }
  .bf-bento__item--lead { height: 409px; }
  .bf-bento__item img { height: 200px !important; }
  .bf-bento__item--lead img { height: 409px !important; }
  .bf-bento__item--lead {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* The block with our editors stood 20px to the right of everything else:
   the section had its own side padding, while the other blocks stand on the
   edge of the common column. The padding is removed, the block stands where
   the rest of the page stands. */
@media (min-width: 761px) {
  .bf-editor {
    padding-left: 0;
    padding-right: 0;
  }
}