/**
 * Comm360 — Cartes collantes avec rebond (Stacking Sticky Cards (Bounce) —
 * CSS FIDÈLE Osmo).
 *
 * CSS repris verbatim de la fiche Osmo. Les classes cards-stack__* /
 * cards-stack-card__* sont espacées de noms et stylent les cartes de la démo
 * (facultatives, réutilisables telles quelles) ; la position sticky et le
 * top de .cards-stack__item sont en revanche NÉCESSAIRES à l'effet (le script
 * lit le top calculé de la première carte pour caler l'accroche). Seule
 * adaptation : le sélecteur générique « .container » de la fiche est limité à
 * « .cards-stack .container » pour ne pas écraser le .container d'un thème —
 * rendu identique, la fiche ne l'emploie qu'à l'intérieur de .cards-stack.
 * Le déclencheur de l'effet est la classe .comm360-cartes-rebond ou
 * l'attribut Osmo d'origine [data-stacking-cards-init] posé sur la section.
 */

.cards-stack {
  padding-top: 15dvh;
  padding-bottom: 15dvh;
}

.cards-stack .container {
  max-width: 90em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
}

.cards-stack__list {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.cards-stack__item {
  flex: none;
  width: 100%;
  max-width: 25em;
  position: sticky;
  top: 5em;
}

.cards-stack__item.is--wide {
  max-width: 60em;
}

.cards-stack-card {
  aspect-ratio: 2 / 3;
  background-color: #fff;
  border-radius: 2em;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  padding: 2.5em;
  display: flex;
}

.cards-stack-card.is--green {
  background-color: #b1ae91;
}

.cards-stack-card.is--dark {
  color: #fff;
  background-color: #201d1d;
}

.cards-stack-card.is--wide {
  aspect-ratio: 5 / 3;
}

.cards-stack-card__number {
  font-size: 6.75em;
  font-weight: 500;
  line-height: .95;
}

.cards-stack-card__h {
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.375em;
  font-weight: 600;
  line-height: .95;
}

.cards-stack-card__h.is--wide {
  font-size: 4.5em;
}

.cards-stack-card__services {
  flex-flow: column;
  justify-content: flex-end;
  min-height: 11em;
  display: flex;
}

.cards-stack-card__services-p {
  letter-spacing: -.01em;
  margin-bottom: 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.4;
}

@media screen and (max-width: 991px) {
  .cards-stack-card.is--wide {
    aspect-ratio: 5 / 4;
  }
}

@media screen and (max-width: 767px) {
  .cards-stack__item.is--wide {
    max-width: 25em;
  }

  .cards-stack-card {
    font-size: .8em;
  }

  .cards-stack-card.is--wide {
    aspect-ratio: 2 / 3;
  }

  .cards-stack-card__h.is--wide {
    font-size: 3.375em;
  }
}