/* A quieter portrait frame beside the homepage copy. The after state remains
   in flow while hidden, so either tab retains exactly the same dimensions. */
@media (min-width:880px) {
  body.home-refresh .buyer-hero .before-after {
    width:calc(100% - 16px);
    max-width:500px;
    justify-self:end;
    margin-inline:0;
  }

  body.home-refresh .buyer-hero #ba-after {
    min-height:448px;
    padding-bottom:0;
  }

  body.home-refresh .buyer-hero .hero-slack-post {
    padding-top:24px;
  }

  body.home-refresh .buyer-hero #ba-after .hero-slack-thread {
    margin-top:24px;
    margin-bottom:24px;
  }
}

/* On a single-column layout, use the available width and let the message
   determine the height rather than creating an empty fixed-height panel. */
@media (max-width:879px) {
  body.home-refresh .buyer-hero .before-after {
    width:100%;
    max-width:500px;
    justify-self:center;
    margin-inline:auto;
  }
}