/* V10.4 — testate delle due collezioni: una posizione locale, non legata
 * alla larghezza dell'intero monitor. Su schermi molto ampi il Diario non
 * porta più la mascotte verso il testo; Regali le riserva lo stesso spazio. */
.route-regali .collection-hero,
.route-diario .collection-hero {
  box-sizing: border-box;
  text-align: left;
}

.route-regali .collection-hero {
  min-height: 292px;
  padding-right: clamp(250px, 31vw, 410px);
}

.route-regali .collection-hero:after {
  display: none;
  right: clamp(18px, 3vw, 56px);
  bottom: -24px;
  width: clamp(185px, 22vw, 290px);
  height: clamp(230px, 26vw, 390px);
  opacity: .68;
}

.route-regali .collection-hero__mascot--gift {
  right: clamp(18px, 3vw, 56px);
  bottom: -23px;
  width: clamp(185px, 22vw, 290px);
}

/* In precedenza il valore "right" usava 100vw: dentro una testata larga
 * al massimo 1440px, su monitor grandi spostava Gippittino al centro. */
.route-diario .collection-hero__mascot {
  right: clamp(18px, 3vw, 56px);
}

@media (max-width: 800px) {
  .route-regali .collection-hero {
    min-height: 255px;
    padding-right: clamp(158px, 30vw, 236px);
  }

  .route-regali .collection-hero:after {
    right: 18px;
    bottom: -17px;
    width: clamp(137px, 26vw, 205px);
    height: clamp(185px, 38vw, 290px);
  }

  .route-regali .collection-hero__mascot--gift {
    right: 18px;
    bottom: -17px;
    width: clamp(137px, 26vw, 205px);
  }
}

@media (max-width: 520px) {
  .route-regali .collection-hero {
    min-height: 220px;
    padding-right: 145px;
    padding-bottom: 30px;
  }

  .route-regali .collection-hero:after {
    right: 3px;
    bottom: -13px;
    width: 143px;
    height: 186px;
  }

  .route-regali .collection-hero__mascot--gift {
    right: 3px;
    bottom: -13px;
    width: 143px;
  }

  .route-diario .collection-hero__mascot {
    right: 3px;
  }
}