/* Home-only photo treatment. The hero's content and grid stay intact. */
.hero{position:relative}
.hero::before{
  content:"";
  position:absolute;
  inset:0 0 0 38%;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--cream) 0%,color-mix(in srgb,var(--cream) 88%,transparent) 19%,color-mix(in srgb,var(--cream) 48%,transparent) 43%,transparent 70%),
    url('/assets/home-hero-food-efood-v1.png');
  background-position:center,right center;
  background-size:cover,cover;
  background-repeat:no-repeat;
}
.hero>.hero-grid{position:relative;z-index:1}
.hero .hero-ticket.hero-ticket-link{
  justify-self:end;
  width:min(100%,330px);
  min-height:410px;
  padding:46px 30px 32px;
  left:clamp(0px,2vw,32px);
}
@media(max-width:900px){
  .hero::before{
    inset:38% 0 0;
    background-image:
      linear-gradient(180deg,var(--cream) 0%,color-mix(in srgb,var(--cream) 75%,transparent) 12%,transparent 34%),
      url('/assets/home-hero-food-efood-v1.png');
    background-position:center,right center;
  }
  .hero .hero-ticket.hero-ticket-link{
    justify-self:center;
    left:0;
    width:min(100%,340px);
    min-height:350px;
    padding:45px 30px 30px;
  }
}
@media(max-width:640px){
  .hero::before{inset:42% 0 0;background-position:center,83% center}
  .hero .hero-ticket.hero-ticket-link{
    width:min(100%,290px);
    min-height:330px;
    padding:38px 28px 30px;
  }
}
/* Keep the yellow badge heading within the card at every viewport. */
.hero .hero-ticket .ticket-big{font-size:clamp(2.7rem,3.4vw,3.45rem)}