/* Three small notes orbit the portrait instead of forming a left-hand stack. */
.portrait-device {
  top: 9%;
  right: 13%;
}

.floating-card {
  width: min(190px, 32vw);
  min-height: 108px;
  padding: 14px;
  border-radius: 28px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.floating-card:hover {
  box-shadow: 0 20px 38px rgba(72, 49, 43, 0.18);
}

.card-one {
  top: 2%;
  left: 0;
  transform: rotate(-2deg);
}

.card-three {
  top: 50%;
  left: 3%;
  transform: rotate(1.5deg);
}

.card-two {
  top: 57%;
  right: 0;
  left: auto;
  transform: rotate(-1.5deg);
}

.card-one:hover,
.card-three:hover,
.card-two:hover {
  transform: translateY(-5px) rotate(0deg);
}

@media (max-width: 1080px) {
  .portrait-device {
    right: 8%;
  }

  .floating-card {
    width: min(180px, 35vw);
  }

  .card-two {
    right: 0;
  }
}

@media (max-width: 680px) {
  .hero-stage {
    min-height: 615px;
  }

  .portrait-device {
    top: 18%;
    right: 10px;
    width: min(244px, 62vw);
  }

  .floating-card {
    width: min(154px, 40vw);
    min-height: 94px;
    gap: 7px;
    padding: 12px;
    border-radius: 24px;
  }

  .floating-card p {
    font-size: 0.72rem;
    line-height: 1.42;
  }

  .floating-card .icon-disc {
    width: 38px;
    height: 38px;
  }

  .card-one {
    top: 1%;
    left: 0;
  }

  .card-three {
    top: 51%;
    left: 0;
  }

  .card-two {
    top: 69%;
    right: 0;
    left: auto;
  }
}