/* Preserve complete app screens where the phone layout was clipping them. */
@media (max-width: 540px) {
  .campaign-page .overview-phones {
    height: auto;
    min-height: 0;
    padding: 12px 16px 24px;
    overflow: visible;
  }

  .campaign-page .overview-phones .device-frame {
    min-width: 0;
    flex: 0 1 163px;
  }

  .campaign-page .overview-phones .device-frame + .device-frame {
    flex-basis: 148px;
  }

  /* A flexible track prevents the visual's 360px width widening the copy. */
  .campaign-page .guarantee-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .campaign-page .guarantee-copy {
    min-width: 0;
  }

  .campaign-page .guarantee-layout .guarantee-visual .hand-note {
    left: 8px;
    right: 8px;
  }

  .campaign-page .footer-badges {
    flex-wrap: wrap;
  }

  .campaign-page .more-screens[open] > summary {
    padding-right: 6px;
  }

  .campaign-page .more-screens[open] > summary > span {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    line-height: 1;
  }
}

@media (max-width: 370px) {
  /* Keep the full labels inside the map without moving its activity nodes. */
  .campaign-page .journey-app-step--register .journey-step-copy,
  .campaign-page .journey-app-step--current .journey-step-copy {
    width: calc(100% - 79px);
    max-width: 132px;
  }

  .campaign-page #app-testes .app-tour__label {
    font-size: 15px;
  }
}