/**
 * רשת משחקים בכתבות חדשות (משחקי החודש וכו')
 * דסקטופ: 4 בשורה, צמודים לימין (קו הטקסט)
 * מובייל: 3 בשורה, שם בשורה אחת עם ...
 */

.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 110px);
  justify-content: start;
  column-gap: 8px;
  row-gap: 10px;
  margin: 8px 0 4px;
  max-width: 100%;
}

.games-grid a.gamelink,
.article-body .games-grid a.gamelink {
  color: #000;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
  display: block;
  width: 110px;
  line-height: 1.2;
}

.games-grid a.gamelink .gamename {
  display: block;
  width: 100px;
  max-width: 100px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.games-grid .gamepic,
.article-body .games-grid img.gamepic,
.article-body img.gamepic {
  width: 100px;
  height: 85px;
  max-width: 100px;
  border: 0;
  margin: 4px auto 0;
  border-radius: 12%;
  display: block;
  -webkit-filter: drop-shadow(3px 3px 3px #808080);
  filter: drop-shadow(3px 3px 3px #808080);
}

/* כתבות ישנות עם טבלת משחקים (בלי .games-grid) */
.article-body table a.gamelink {
  color: #000;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
  display: block;
  line-height: 1.2;
}
.article-body table a.gamelink .gamename {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
  margin: 0 auto;
}
.article-body table .gamepic {
  width: 100px;
  height: 85px;
  margin: 4px auto 0;
  border-radius: 12%;
  display: block;
  -webkit-filter: drop-shadow(3px 3px 3px #808080);
  filter: drop-shadow(3px 3px 3px #808080);
}

@media (max-width: 700px) {
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6px;
    row-gap: 10px;
    justify-content: start;
  }

  .games-grid a.gamelink,
  .article-body .games-grid a.gamelink {
    width: 100%;
    font-size: 12px;
  }

  .games-grid a.gamelink .gamename {
    width: 90px;
    max-width: 90px;
    font-size: 12px;
  }

  .games-grid .gamepic,
  .article-body .games-grid img.gamepic,
  .article-body img.gamepic {
    width: 90px;
    height: 76px;
    max-width: 90px;
  }

  .article-body table a.gamelink .gamename {
    max-width: 90px;
    font-size: 12px;
  }
  .article-body table .gamepic {
    width: 90px;
    height: 76px;
  }
}