.container {
  padding-top: 30px;
  padding-bottom: 30px;
}

.btn.btn-success {
  margin-bottom: 10px;
}

.board-game {
  background: #198754;
  border: 5px solid #6c757d;
  border-radius: 10px;
  margin-top: 30px;
  padding: 40px;
  color: #ffffff;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  grid-gap: 3em;
  justify-content: center;
  width: 500px;
  margin-bottom: 20px;
}

.grid-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-gap: 5px;
  background-color: white;
  color: black;
  font-size: 1.5em;
  padding: 10px;
  border-radius: 5%;
  box-shadow: 0px 5px 15px grey;
}

.heart {
  text-align: center;
  align-self: center;
  font-size: 2em;
  color: red;
}

.top-left {
  padding: 0.1em;
}

.bottom-right {
  align-self: end;
  transform: rotate(180deg);
}

/* Responsive */

@media (max-width: 1199px) {
  .board-game {
    padding: 25px;
  }

  .grid-container {
    grid-gap: 1em;
    width: initial;
  }
}

@media (max-width: 991px) {
  .grid-container {
    grid-template-columns: repeat(1, 200px);
  }
}

@media (max-width: 767px) {
  .grid-container {
    grid-template-columns: repeat(2, 150px);
  }

  .grid-item {
    grid-template-rows: 1fr 1fr 1fr;
  }

  .board-game {
    margin: 10px 5px;
  }
}

@media (max-width: 575px) {
  .heart {
    font-size: 1.5em;
  }

  .grid-container {
    grid-template-columns: repeat(2, 120px);
    gap: 3em;
  }

  .grid-item {
    font-size: 1em;
  }
}

@media (max-width: 424px) {
  .grid-container {
    gap: 1em;
  }
}

@media (max-width: 374px) {
  .grid-container {
    grid-template-columns: repeat(1, 120px);
  }
}