/**
 * Variables to override: https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
 */
._p-to-p_1xgqz_4 {
  background-image: linear-gradient(120deg, rgba(248, 199, 255, 0.5) 20%, rgba(210, 204, 255, 0.5) 76%);
}

._g-o-y_1xgqz_8 {
  background-image: linear-gradient(337deg, rgba(255, 192, 173, 0.5) 20%, rgba(255, 215, 138, 0.5) 76%);
}

._g-ddg_1xgqz_12 {
  background-image: linear-gradient(120deg, #efbdad 20%, rgba(252, 231, 171, 0.5) 76%);
}

/** Tools page heading bg */
._g-bc_1xgqz_17 {
  background-image: linear-gradient(136deg, hsl(32, 98%, 88%), hsl(44, 85%, 82%) 80%);
}
html[data-bs-theme=dark] ._g-bc_1xgqz_17 {
  background-image: linear-gradient(136deg, hsl(215, 46%, 32%), hsl(255, 24%, 38%) 110%);
}

/**
Gradient graveyard:

// purple -> orange -> yellow
// .g-sw-0 {
//   background-image: linear-gradient(120deg, #704a8d, #ef8576, #fadf79);
// }

// similar to .g-bc in light mode
// .bg-g-yo {
//   $color-g-orange: hsla(35.5deg, 88%, 52%, 0.39);
//   $color-g-yellow: hsla(54deg, 80%, 72%, 0.86);

//   background: radial-gradient(circle at 1.97% 54.04%, $color-g-orange, transparent 100%),
//     radial-gradient(circle at 98.03% 95.96%, $color-g-yellow, transparent 100%),
//     radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8) 100%);
//   color: $dark;

//   @include darkMode {
//     // background: linear-gradient();
//     color: inherit;
//   }
// }
*/
._bgStep01_1xgqz_48 {
  background-color: hsl(126, 94%, 77%);
  border-radius: 0.25rem;
  color: #212529;
}

._bgStep02_1xgqz_54 {
  background-color: hsl(208, 93%, 74%);
  border-radius: 0.25rem;
  color: #212529;
}

._bgStep03_1xgqz_60 {
  background-color: hsl(248, 75%, 75%);
  border-radius: 0.25rem;
  color: #212529;
}

._layers_1xgqz_66 {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding-bottom: 10vmin;
}

._stack_1xgqz_74 {
  display: grid;
  perspective: 5000px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
._stack_1xgqz_74:hover ._card_1xgqz_80 {
  --z-offset: 0;
  transform: var(--default-transform);
}
._stack_1xgqz_74:hover ._card_1xgqz_80 ::after {
  opacity: 0;
}

._card_1xgqz_80 {
  --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
  --z-offset: 0;
  --default-transform: rotateX(0deg) rotateY(0) rotate(0deg) translateZ(var(--z-offset)) translateY(0)
    translateX(0);
  --image-transform: rotateX(0deg) rotateY(30deg) rotate(0deg) translateZ(var(--z-offset))
    translateY(0vmin) translateX(8vmin);
  --blur-transform: rotateX(0deg) rotateY(30deg) rotate(0deg) translateZ(var(--z-offset))
    translateY(0vmin) translateX(0vmin);
  --bg-transform: rotateX(0deg) rotateY(30deg) rotate(0deg) translateZ(var(--z-offset))
    translateY(0vmin) translateX(-8vmin);
  aspect-ratio: 1/1.7776041667;
  align-items: center;
  background: lch(100% 0 0deg / 0.05);
  display: flex;
  grid-area: stack;
  justify-content: center;
  transform: var(--default-transform);
  transition: transform 0.5s var(--easeInOutCirc);
  width: 30vmin;
}
._card_1xgqz_80 ::after {
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.42, 0.54, 0.55, 0.79);
}
._card_1xgqz_80._bgLayer_1xgqz_113 {
  z-index: 1;
  --z-offset: -22vmin;
  transform: var(--bg-transform);
}
._card_1xgqz_80._bgLayer_1xgqz_113 ::after {
  border-radius: 0.25rem;
  top: 10px;
  color: #212529;
  font-weight: 500;
  left: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  position: absolute;
  background-color: hsl(126, 94%, 77%);
  content: "01.";
}
._card_1xgqz_80._blurLayer_1xgqz_130 {
  z-index: 2;
  transform: var(--blur-transform);
}
._card_1xgqz_80._blurLayer_1xgqz_130 ::after {
  border-radius: 0.25rem;
  top: 10px;
  color: #212529;
  font-weight: 500;
  left: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  position: absolute;
  background-color: hsl(208, 93%, 74%);
  content: "02.";
}
._card_1xgqz_80._imageLayer_1xgqz_146 {
  z-index: 3;
  --z-offset: 22vmin;
  transform: var(--image-transform);
}
._card_1xgqz_80._imageLayer_1xgqz_146 ::after {
  border-radius: 0.25rem;
  top: 10px;
  color: #212529;
  font-weight: 500;
  left: 10px;
  letter-spacing: 1px;
  padding: 2px 7px;
  position: absolute;
  background-color: hsl(248, 75%, 75%);
  content: "03.";
}
._card_1xgqz_80 > div {
  width: 100%;
}