.main .card__img {
  width: 93%;
}
/* @media screen and (min-width: 436px) {
  .main .card__img {
    width: 70%;
  }
} */
.markup-interactive {
  position: relative;
}

.for-float-wrapper .card__text {
  text-align: start;
  font-size: 19px;
  margin-bottom: 25px;
}
@media screen and (min-width: 436px) {
  .for-float-wrapper .card__text {
    font-size: 18px;
  }
}

.text-confirm-answer {
  font-size: 17px;
  font-weight: 400;
  color: grey;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 88%;
  margin-top: 8px;
  transform: translate(-50%, 0%);
  opacity: 1;
  transition: all 250ms ease 0s;
  text-align: end;
}
@media screen and (min-width: 436px) {
  .text-confirm-answer {
    /* width: 76%; */
  }
}
.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
}
.question {
  font-size: 16px;
  text-transform: uppercase;
  text-align: start;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.4px;
  line-height: 1;
  width: max-content;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0) scaleY(1.8);
  background-color: transparent;
  padding: 3px 8px;
  border-radius: 20px;
  transition: all 350ms;
  cursor: pointer;
}
@media screen and (min-width: 436px) {
  .question {
    font-size: 14px;
  }
}
.question.answer {
  background-color: red;
}
.question-1 {
  top: 44%;
}
.question-2 {
  top: 57%;
}
.question-3 {
  top: 70%;
}
.click-path {
  position: absolute;
  cursor: pointer;
}
.click-path-left {
  width: 12%;
  height: 18%;
  top: 12%;
  left: 7%;
}
.click-path-right {
  width: 12%;
  height: 23%;
  top: 4%;
  left: 79%;
}