.games {
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 600px) {
  .games { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .games { grid-template-columns: repeat(3, 1fr); }
}

.game {
  color: white;
  position: relative;
}

.game p {
    margin: 0;
}

.game img {
    width: 100%;
    height: 100%; 
    object-fit: contain;
}

.game-video{
    opacity: 0;
    transition: 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.game:hover .game-video {
    opacity: 1;
}