.card__img {
  width: 88%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  margin: 0 auto;
}
.for-float-wrapper.whats-on-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 88%;
  margin: 5px auto 0 auto;
}
.for-float-wrapper .card__text {
  text-align: start;
}
.whats-on-top .card__text {
  width: 50%;
  margin-top: 0;
  margin-bottom: 20px;
  margin-left: 0;
}
.whats-on-top .card__text.card__text-explanations {
  width: 100%;
}
.text-confirm-answer {
  font-size: 15px;
  font-weight: 400;
  color: grey;
  position: absolute;
  top: -7%;
  left: 71%;
  width: 105px;
  transform: translate(0, 100%);
  opacity: 1;
  transition: all 250ms ease 0s;
  z-index: 9;
}
@media screen and (min-width: 436px) {
  .text-confirm-answer {
    top: -9%;
  }
}
.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms ease 0s;
}
.click-figure {
  position: absolute;
  width: 33%;
  height: 33%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
}
.grid-container {
  width: 88vw;
  height: 88vw;
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto
    0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto
    0 auto 0 auto 0 auto 0 auto 0 auto;
  grid-template-columns: repeat(25, auto);
  -ms-grid-rows: auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0
    auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0 auto 0
    auto 0 auto 0 auto 0 auto 0 auto;
  grid-template-rows: repeat(25, auto);
  gap: 0;
}

@media screen and (min-width: 436px) {
  .grid-container {
    width: 300px;
    height: 300px;
  }
}

.grid-cell,
.draw-cell {
  margin: 0;
  padding: 0;
}
.draw-cell {
  border: 0.5px solid white;
  background: silver;
}

.grey {
  background-color: grey;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}

.red {
  background-color: #e60000;
}

.grid-draw-container {
  width: 37vw;
  height: 37vw;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr;
  grid-template-columns: repeat(5, 1.5fr);
  -ms-grid-rows: 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr;
  grid-template-rows: repeat(5, 1.5fr);
  gap: 0;
  margin: 0 0 70px 10px;
  position: relative;
}

@media screen and (min-width: 436px) {
  .grid-draw-container {
    width: 130px;
    height: 130px;
  }
}

.clickable {
  cursor: pointer;
}
.cell__item-black,
.cell__item-clear {
  width: 9vw;
  height: 9vw;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
  -webkit-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms;
  cursor: pointer;
}
.cell__item-black {
  margin-left: -7.5vw;
}
.cell__item-black.selected {
  border: 1px solid black;
  border-radius: 3px;
}
.cell__item-clear {
  margin-left: 7.5vw;
}
.cell__item-clear.selected {
  border: 1px solid silver;
  border-radius: 3px;
}

@media screen and (min-width: 436px) {
  .cell__item-black {
    margin-left: -26px;
  }
  .cell__item-clear {
    margin-left: 26px;
  }
  .cell__item-black,
  .cell__item-clear {
    width: 30px;
    height: 30px;
  }
}
.item__clear-square {
  width: 78%;
  height: 78%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.cell__item-black .item__clear-square {
  background-color: black;
}
.cell__item-clear .item__clear-square {
  background-color: var(--white-bgc);
  border: 1px solid silver;
  overflow: hidden;
}

.item__clear-line-first,
.item__clear-line-second {
  width: 150%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9;
  background-color: silver;
}

.item__clear-line-second {
  -webkit-transform: translate(-50%, 0) rotate(45deg);
  -ms-transform: translate(-50%, 0) rotate(45deg);
  transform: translate(-50%, 0) rotate(45deg);
}
.item__clear-line-first {
  -webkit-transform: translate(-50%, 0) rotate(-45deg);
  -ms-transform: translate(-50%, 0) rotate(-45deg);
  transform: translate(-50%, 0) rotate(-45deg);
}