/* Purpose-built wide product banners replace the original square source images. */
.hero-carousel .spotlight-slide--pudding {
  background-image: url('../assets/hero-protein-pudding-banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-carousel .spotlight-slide--pudding h3 {
  display: grid;
  gap: 8px;
  line-height: 1.05;
}

.hero-carousel .spotlight-slide--pudding .pudding-product-label {
  display: block;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 500;
}

.hero-carousel .spotlight-slide--pudding .pudding-protein-headline {
  display: block;
  font-size: clamp(50px, 5.1vw, 78px);
  font-weight: 600;
}

.hero-carousel .spotlight-slide--pudding .pudding-supporting-copy {
  margin-bottom: 0;
}

.hero-carousel .spotlight-slide--pudding .pudding-highlights {
  margin-top: 9px;
  color: #f9d872;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}

.hero-carousel .spotlight-slide--fruit-cup {
  background-image: url('../assets/hero-fresh-fruit-cup-banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 640px) {
  .hero-carousel .spotlight-slide--pudding,
  .hero-carousel .spotlight-slide--fruit-cup { background-position: 62% center; }

  .hero-carousel .spotlight-slide--pudding .pudding-product-label { font-size: 31px; }
  .hero-carousel .spotlight-slide--pudding .pudding-protein-headline { font-size: 42px; }
  .hero-carousel .spotlight-slide--pudding .pudding-supporting-copy { font-size: 15px; }
  .hero-carousel .spotlight-slide--pudding .pudding-highlights { font-size: 13px; }
}