/* Hero 09.2026 - approved visual. Loaded AFTER style.css; style.less / style.css are not touched. */

/* ---- desktop 1000-1960px: art at its natural size, so it does not re-scale when the section grows;
        bottom 150px fade into the site's own #e8e8e8; the invisible pack placeholder reserves room for the new small print ---- */
@media only screen and (min-width: 1000px) and (max-width: 1960px){
  .welcome{
    background-image: linear-gradient(to bottom, rgba(232,232,232,0) 0, #e8e8e8 100%), url(../images/hero-2026-09.jpg);
    background-size: 100% 150px, auto 1196px;
    background-position: center 1046px, center top;
    background-repeat: no-repeat, no-repeat;
    background-color: #e8e8e8;
  }
  .welcome .container .pack_holder{ min-height: 690px; }
}

/* ---- wider than the art (over 1960px): same recipe, but everything scales with the screen width
        (1 art px = 0.051vw), so the art keeps its proportions and the room for the small print grows with it ---- */
@media only screen and (min-width: 1961px){
  .welcome{
    background-image: linear-gradient(to bottom, rgba(232,232,232,0) 0, #e8e8e8 100%), url(../images/hero-2026-09.jpg);
    background-size: 100% 7.65vw, 100% auto;
    background-position: center 53.37vw, center top;
    background-repeat: no-repeat, no-repeat;
    background-color: #e8e8e8;
  }
  .welcome .container .pack_holder{ min-height: calc(39.85vw - 107px); }
  /* the NOBEL logo (HTML) keeps clear of the shield in the art, which moves with the screen width */
  .welcome .container .noble_logo{ margin-left: calc(508px - 27.45vw); }
}

/* ---- phones and tablets (up to 999px): the same visual, stacked vertically (offer / small print / family), with the NOBEL logo and the
        virus decoration from the art. The site's own rules (no-repeat, 100% auto, #e8e8e8) stay; only the file and the reserved room change ---- */
@media only screen and (max-width: 999px){
  .welcome{ background-image: url(../images/hero-mobile-2026-09-v2.jpg); }
  .welcome .container .pack_holder{ margin-top: 0; height: calc(191vw - 55px - 10vh); }
}