.hero { background-image: var(--site-content-hero-image, url("../images/hero.png")); }
.collection-hero { background: linear-gradient(90deg, #fff8f5 0%, rgba(255, 248, 245, .94) 27%, rgba(255, 248, 245, .58) 47%, rgba(255, 248, 245, .08) 67%, transparent 78%), var(--site-content-hero-image, url("../images/hero.png")) 78% center / cover no-repeat; }
.contact-hero { background: linear-gradient(90deg, #fff8f5 0%, rgba(255, 248, 245, .93) 31%, rgba(255, 248, 245, .58) 49%, rgba(255, 248, 245, .1) 69%, transparent 80%), var(--site-content-hero-image, url("../images/hero1.png")) 76% center / cover no-repeat; }
.about-hero { background: linear-gradient(90deg, #fff8f5 0%, rgba(255, 248, 245, .93) 30%, rgba(255, 248, 245, .57) 49%, rgba(255, 248, 245, .08) 69%, transparent 80%), var(--site-content-hero-image, url("../images/hero.png")) 78% center / cover no-repeat; }

@media (max-width: 700px) {
  .collection-hero { background: linear-gradient(180deg, rgba(255, 248, 245, .96) 0%, rgba(255, 248, 245, .72) 55%, rgba(255, 248, 245, .25) 100%), var(--site-content-hero-image, url("../images/hero.png")) 69% center / cover no-repeat; }
  .contact-hero { background: linear-gradient(180deg, rgba(255, 248, 245, .96) 0%, rgba(255, 248, 245, .72) 56%, rgba(255, 248, 245, .24) 100%), var(--site-content-hero-image, url("../images/hero1.png")) 69% center / cover no-repeat; }
  .about-hero { background: linear-gradient(180deg, rgba(255, 248, 245, .96) 0%, rgba(255, 248, 245, .72) 56%, rgba(255, 248, 245, .24) 100%), var(--site-content-hero-image, url("../images/hero.png")) 69% center / cover no-repeat; }
}