.scenario1 .right {
  grid-template-rows: 100px 550px 150px;
}

.scenario1 .game-field {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  max-width: 600px;
  max-height: 400px;

  border: 0;
  background-color: transparent;
}
.scenario1 .region-1 {
  border-radius: 0;
  background-color: #ffffff;
  box-shadow: inset 0px 1px 3px rgba(41, 50, 138, 0.6);
}
.scenario1 .region-2 {
  border-radius: 0;
  background-color: #ffffff;
  box-shadow: inset 0px 1px 3px rgba(41, 50, 138, 0.6);
}
.scenario1 .region-1 .game-field-item-title,
.scenario1 .region-2 .game-field-item-title{
  top: -45px;
  left: 0;
  color: #ffffff;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 37px;
  background-color: transparent;
}
.scenario1 .focus .region-1:hover .game-field-item-title,
.scenario1 .focus .region-2:hover .game-field-item-title{
  color: #59FFF0;
}
.scenario1 .focus .region-1:hover,
.scenario1 .focus .region-2:hover{
    /* z-index: 2; */
    /* outline: thick double #32a1ce; */
    border-color: #59FFF0;
    cursor: pointer;
}

.scenario1 .game-field:before {
  content: "";
  height: 0;
}
.scenario1 .game-field:after {
  content: "";
  height: 0;
}
.scenario1 .game-field-item {
  padding: 15px 17px 15px 18px;
}
.scenario1 .game-field-item-btn {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  bottom: 5px;
  text-align: center;
}
button.btn-step-close {
  text-align: center;
  font-family: 'Montserrat';
  font-size: .6em;
  font-weight: bold;
  text-transform: uppercase;
  background-color: var(--dark-slime);
  color: var(--field-item-title);
  border: 1px solid var(--black);
  padding: 5px 15px;
  border-radius: 20px;
  position: relative;
  top: -3px;
  display: none;
  z-index: 100;
}
button.btn-step-close.active {
  display: inline-block;
}
/* .card-front h3 {
  padding-top: 10%;
  height: 20%;
  font-size: 30px;
} */
.scenario1 .card-front > img {
  display: none;
  position: absolute;
  top: 10%;
  height: 70%;
  z-index: 1;
  opacity: .4;
}
.scenario1 .card-front > img.concept {
  right: -1px;
}
.scenario1 .card-front > img.definition {
  left: -1px;
}
.scenario1 .card-front p {
  position: absolute;
  top: 0;
  left: 0;
  height: 87%;
  width: 90%;
  z-index: 2;
  font-size: 6.8cqi;
  padding-top: 12.5%;
}
.scenario1 .deck .card .card-front p, .scenario1 .game-field .card .card-front p {
    font-size: 6.8cqi;
}
.scenario1 .deck .card .card-front p, .scenario1 .game-field .card .card-front p {
    font-size: 6.8cqi;
}
.scenario1 .game-field .region-1 .card .card-front p {
  font-size: 8cqi;
}
.scenario1 .game-field .card {
  width: 248px;
  height: 340px;
}
@keyframes goOut {
  from {
      transform: translateX(0%);
      opacity: 1;
    }

    to {
      transform: translateX(100%);
      opacity: 0;
    }
}
.goOutCard {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  /* -webkit-animation-name: goOut; */
  animation-name: goOut;
}
.goOutCard1 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  /* -webkit-animation-name: goOut; */
  animation-name: goOut1;
}
@keyframes goOut1 {
  from {
      transform: translateX(0%);
      opacity: 1;
    }

    to {
      transform: translateX(42%);
      opacity: 0;
    }
}
.goOutCard2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  /* -webkit-animation-name: goOut; */
  animation-name: goOut2;
}
@keyframes goOut2 {
  from {
      transform: translateX(0%);
      opacity: 1;
    }

    to {
      transform: translateX(-14%);
      opacity: 0;
    }
}
/* .scenario1 .game-field .card-block {
  display: flex;
} */
/* .scenario1 .game-field .card {
  position: relative;
  top: 0;
  left: 0;
} */
.card-res-block {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.card-res-block .card-front p {
  height: 85%;
}

.card-res-block .card {
  width: 250px;
  height: 340px;
}
.game-field-res {
  max-width: 400px;
  margin: 0 auto;
}
.game-field-res button {
  border-radius: 15px;
  border: 0;
  width: 25px;
  height: 25px;
  margin: 5px;
}
.game-field-res button {
  background: linear-gradient(180deg, #F8C256 0%, #F76B5E 100%);
}
.game-field-res button:nth-child(2n+2) {
  background: linear-gradient(191.51deg, #F35171 5.01%, #C85EBF 91.54%);
}
.game-field-res button:nth-child(2n+3) {
  background: linear-gradient(180deg, #7E6ECC 0%, #7498EF 100%);
}