/* SEO hero on phones: the cards and stickers still overlap and tilt, but
   they sit around the photo instead of over the two faces. */
@media (max-width: 768px) {
  .svp-hero-stage .svp-polaroid ~ .svp-float-tl {
    margin-left: 0;
    top: auto;
    bottom: -19%;
    left: 3%;
    width: min(16rem, 76%);
    --r: -4deg;
  }

  /* Room for the longest typed phrase ("marketing agency near me"). */
  .svp-hero-stage .svp-float-tl .svp-search-bar {
    padding: 0 0.8rem;
  }

  .svp-hero-stage .svp-float-tl .svp-search-bar span:last-child {
    font-size: 0.74rem;
  }

  .svp-hero-stage .svp-polaroid ~ .svp-float-br {
    top: auto;
    bottom: -17%;
    right: -4%;
    left: auto;
    width: 41%;
    --r: 6deg;
  }

  /* Smaller card so it overlaps the search card's corner, never its typed text. */
  .svp-hero-stage .svp-float-br .svp-widget {
    padding: 0.7rem 0.75rem;
  }

  .svp-hero-stage .svp-float-br .svp-widget-top {
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.58rem;
  }

  .svp-hero-stage .svp-float-br strong {
    font-size: 1.5rem;
  }

  .svp-hero-stage .svp-polaroid ~ .svp-sticker-1 {
    top: -9%;
    right: 2%;
    bottom: auto;
    left: auto;
  }

  .svp-hero-stage .svp-polaroid ~ .svp-sticker-2 {
    top: 14%;
    left: -2%;
    bottom: auto;
    right: auto;
  }

  .svp-hero-stage .svp-polaroid ~ .svp-sticker-3 {
    bottom: -26%;
    left: 44%;
    top: auto;
    right: auto;
  }
}