/* "Mi recetario": the saved-recipes banner uses its own responsive photo. */
.saved-hero { position: relative; overflow: hidden; background: var(--night); }
.saved-hero .hero-inner { display: flex; align-items: center; min-height: clamp(400px, 42vw, 640px); max-width: 1200px; margin: 0 auto; padding: 54px 20px 145px; }
.saved-hero-photo { object-position: 66% 50%; }
.saved-hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 16, 13, .82) 0%, rgba(20, 16, 13, .68) 27%, rgba(20, 16, 13, .28) 48%, rgba(20, 16, 13, .04) 76%),
    linear-gradient(180deg, rgba(20, 16, 13, .18), transparent 30%, rgba(20, 16, 13, .28));
}
.saved-hero .hero-copy { max-width: 34rem; }
.saved-hero .hero-copy p:not(.eyebrow) { margin: 12px 0 0; color: var(--on-night-soft); }
.saved { margin-top: -96px; }
.saved .count { margin: 0 0 14px; }
/* The suggestions are only for the empty state; the script hides them once there are cards. */
.saved [data-saved-suggested] { margin-top: 28px; }
@media (max-width: 760px) {
  .saved-hero .hero-inner { min-height: 430px; padding: 30px 16px 130px; }
  .saved-hero-photo { object-position: 72% 50%; }
  .saved-hero-shade {
    background:
      linear-gradient(90deg, rgba(20, 16, 13, .74), rgba(20, 16, 13, .38)),
      linear-gradient(180deg, rgba(20, 16, 13, .16), rgba(20, 16, 13, .32));
  }
  .saved { margin-top: -72px; }
}