/* Our own additions on top of the untouched Webflow stylesheet (loaded after it). */

/* Homepage hero ribbon on phones (Webflow "mobile portrait", up to 479px):
   badge | contact text | social icons in one row, with the text centred in the space between
   the badge and the icons and the icons centred vertically in the visible black banner. */
@media screen and (max-width: 479px) {
  .ribbon-info__wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: auto;
    /* start where the gold badge ends: its left offset (8%) + its width (max(80px, 23.52vw)) */
    left: calc(8% + max(80px, 23.52vw));
    right: 8%;
    bottom: auto;
    /* the hero clips the bottom of the ribbon: 13.4% of the hero is visible out of the ribbon's 16%,
       so the middle of the visible banner is at 6.7 / 16 = 41.875% of the ribbon's height */
    top: 41.875%;
    transform: translate(0, -50%);
  }

  .sm__frame {
    flex: 1;
    margin: 0;
    text-align: center;
  }

  .phone-info {
    width: auto;
    margin: 0 auto;
    font-size: min(14px, 3.6vw);
    text-align: center;
  }

  .phone__frame {
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0;
  }
}