@import url('./my_root.css');
.my_row {
  display: flex;
  flex-wrap: wrap;
}
.my_row .my_col {
  width: 33%;
}
@media only screen and (min-width: 330px) {
  .my_row .my_col {
    width: 33%;
  }
}
@media only screen and (min-width: 520px) {
  .my_row .my_col {
    width: 25%;
  }
}
@media only screen and (min-width: 990px) {
  .my_row .my_col {
    width: 16.6%;
  }
}
@media only screen and (min-width: 1300px) {
  .my_row .my_col {
    width: 12.5%;
  }
}
@media only screen and (min-width: 1700px) {
  .my_row .my_col {
    width: 10%;
  }
}
@media only screen and (min-width: 2000px) {
  .my_row .my_col {
    width: calc(100% / 12);
  }
}
.games_box {
  margin: 3px 4px;
}
.games_box .games_item {
  cursor: pointer;
  overflow: hidden;
  height: 0px;
  padding-bottom: var(--my-games-item-height);
  border-radius: 12px;
  border: var(--my-games-item-border);
}
.games_box .games_item img {
  width: 100%;
  border-radius: 6px;
  border: var(--my-games-item-border);
}
.games_box .games_item .games_name {
  position: relative;
  top: 0px;
  transition: top 0.5s;
  -webkit-transform: top 0.5s;
  background: var(--my-games-item-name-bgcolor);
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
}
.games_box .games_item .games_name span {
  padding: 0px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: var(--my-games-item-name-color);
}
.games_box .games_item:hover .games_name {
  top: -36px;
}