web2468/src/components/GameItem/styles.module.scss

.grid_item{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  width: 100%;
  //border-radius: var(--border-radius);
  transition: all var(--transition);
  will-change: transform;
  & .game_img_wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
    //display: block;
    position: relative;
    background-color: var(--widget-grid-bg);
    border-radius: 0.8rem;
    aspect-ratio:384/516;
    & .game_img{
      position: relative;
      width: 100%;
      //aspect-ratio:384/516;
      border-radius: 0.5rem;
      img{
        width: 100%;
        height: 100%;
        //height: auto;
        //border-top-left-radius: var(--border-radius);
        //border-top-right-radius: var(--border-radius);
      }
    }
    & .online{
      position: absolute;
      display: flex;
      align-items: center;
      top: .375rem;
      right: .375rem;
      height: 1rem;
      font-size: .75rem;
      background-color: rgba(0, 0, 0, .4);
      border-radius: .5rem;
      padding: 0 .375rem;
      line-height: .75rem;
      backdrop-filter: blur(3px);
      span{
        color: #fff;
        font-weight: 600;
        margin-left: .25rem;
      }
    }
  }
  & .bot_info{
    padding: .625rem;
    & .game_tit{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 600;
      height: 1.25rem;
      & .game_desc{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 1px;
        flex: auto;
        color: var(--text);
      }
      & .game_desc_icon{
        width: 1.4em;
        height: 1.4em;
        fill: var(--text);
      }
    }
  }
  & .favorite_con{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: .01rem;
    right: .01rem;
    //border-radius: 50%;
    background: rgba(0, 0, 0, 0.01);
    padding: 0.3rem 0.3rem 0.5rem 0.5rem;
    & .icon{
      width: 1.5rem;
      height: 1.5rem;
      //fill: rgba(255, 255, 255, 0.7);
      fill:  rgba(0, 0, 0, 0.3);
      //background: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      &_active{
        padding: 0.2rem 0.2rem 0.27rem 0.2rem;
        fill: #ffdf46;
        background: rgba(0, 0, 0, 0.3);
        //background: rgba(105, 81, 0, 0.6);
      }
    }
  }
}