/* Mobile order for the home page of the Best onlyfans 2 chain.

On a phone the hero is a single column, so the "Top of the board" panel used to
come before the live partner directory — the cards a reader came for were
pushed a whole screen down. This puts the live directory right under the
headline and the panel below it. The desktop layout is not touched.

The hero and its inner grid are dissolved on small screens so that the panel
can move past the live section; the spacing and the dark hero background are
re-created for the pieces that remain.
*/
@media (max-width: 980px) {
  body.bf-home main { display: flex; flex-direction: column; }
  body.bf-home main > section.bf-hero { display: contents; }
  body.bf-home .bf-hero__inner { display: contents; }

  body.bf-home .bf-hero__copy {
    order: 1;
    background: var(--hero-bg);
    background-image:
      radial-gradient(120% 130% at 88% -10%, rgba(13, 177, 242, .28) 0%, rgba(13, 177, 242, 0) 58%);
    padding: 48px 20px 34px;
  }
  body.bf-home main > section.bf-live { order: 2; }
  body.bf-home .bf-hero__panel {
    order: 3;
    background: var(--hero-bg);
    padding: 0 20px 34px;
  }
  body.bf-home .bf-hero__shelf {
    order: 4;
    background: var(--hero-bg);
    padding: 0 20px 48px;
  }
  body.bf-home main > section:not(.bf-hero):not(.bf-live) { order: 5; }
}