.game-page{
  padding:50px 0 70px;
}

.game-title{
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:28px;
}

.game-title h1{
  font-size:clamp(2.4rem,5vw,4.5rem);
  margin:18px 0 14px;
  line-height:1;
  text-transform:uppercase;
}

.game-description{
  max-width:760px;
  font-size:1.1rem;
  font-weight:700;
  color:#333;
}

.game-badge{
  display:inline-block;
  padding:8px 14px;
  border:3px solid var(--line);
  border-radius:14px;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:4px 4px 0 var(--line);
}

.game-badge.yellow{background:#fffa85}
.game-badge.pink{background:#ff9ff3}
.game-badge.blue{background:#7ed6df}
.game-badge.green{background:#badc58}

.game-frame{
  min-height:520px;
  border:5px solid var(--line);
  border-radius:26px;
  background:white;
  box-shadow:8px 8px 0 var(--line);
  padding:24px;
  overflow:hidden;
}

.game-placeholder{
  min-height:460px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:16px;
  background:
    radial-gradient(#00000010 1px, transparent 1px);
  background-size:18px 18px;
  border-radius:18px;
}

.game-placeholder strong{
  font-size:2.5rem;
  font-weight:900;
  text-transform:uppercase;
}

.game-placeholder span{
  font-size:1.05rem;
  font-weight:700;
  color:#444;
}

@media(max-width:768px){

  .game-title{
    flex-direction:column;
  }

  .game-frame{
    min-height:420px;
  }

}