.four-dish {
  bottom: 3%;
  left: 60%;
  align-items: flex-end;
  z-index: 0;
}

.bottle-container {
  flex: 1.2;
}

.mug-container {
  flex: 3.8;
}

.beaker-container.beaker-1 {
  flex: 1.8;
}
.beaker-container.beaker-2 {
  flex: 2.2;
}

.dish img {
  width: 100%;
}

.girl-left {
  left: 13%;
  bottom: 15%;
  height: 50%;
}

.dish-group {
  width: 100%;
  height: 20%;
  left: 50%;
}

.dish-group .dish {
  position: absolute;
  left: -10%;
  bottom: 5%;
  width: 40%;
}

.dish img {
  object-fit: contain;
}

.dish-group .bottle-container,
.dish-group .mug-container,
.dish-group .beaker-container.beaker-1,
.dish-group .beaker-container.beaker-2 {
  flex: unset;
}

.highlight {
  width: 3vw;
  aspect-ratio: 3/2;
  border: 2px solid red;
}

.unit {
  top: 47%;
}

:is(.beaker1-highlight, .beaker2-highlight) {
  width: 4vw;
}

.dish-group .bottle-container {
  width: 5%;
  left: 2%;
}
.dish-group .mug-container {
  width: 16%;
  left: 8%;
}

.beaker-container > .unit {
  font-size: 1vw;
}

.dish-group .beaker-container.beaker-1 {
  width: 7%;
  left: unset;
  right: 12%;
  bottom: -45%;
}

.dish-group .beaker-container.beaker-1 .unit {
  top: 20%;
}

.dish-group .beaker-container.beaker-2 {
  width: 9%;
  left: unset;
  right: 2%;
  bottom: -30%;
}
.speech-text {
  /* font-size: 0.8em; */
  padding: 3%;
}
.speech-img {
  top: -1.5%;
}

.feedback-box {
  left: 30%;
}

.girl-sm-left {
  left: 10%;
}

.speech-sm-left {
  left: 33%;
}

.speechbox:is(.correct, .incorrect) {
  top: 20%;
}

.speechbox:is(.correct) {
  font-size: 1.6vw;
}

.spechbox-right {
  left: 43%;
}

.question-answer__container > p:has(.speaker) {
  position: relative;
}

.question-answer__container > p {
  width: 40vw;
  position: relative;
}

.question-answer__container .question {
  font-size: 3vw;
  padding: 5% 8%;
}

@media screen and (min-width: 1440px) {
  .speechbox:is(.correct) {
    font-size: 1.3vw;
  }
  .unit {
    font-size: 1vw;
  }
  .beaker-container > .unit {
    font-size: 0.8vw;
  }
}

@media (min-aspect-ratio: 4/3) {
  .unit {
    font-size: 2vh;
  }
  .beaker-container > .unit {
    font-size: 1.2vh;
  }

  .question-answer__container .question {
    font-size: 4vh;
    /* width: 95%; */
    margin: auto;
  }
  .question-answer__container > p {
    width: 100%;
    margin: auto;
    font-size: 2.8vh;
  }
  .speaker img {
    width: 4vh;
  }

  .feedback-box:is(.correct, .incorrect) > p {
    font-size: 2.4vh;
  }
}