.m-game-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; }
.m-game-card__top-right { position: absolute; z-index: 9; top: 6px; right: 8px; opacity: 0; }
.m-game-card__top-right--mobile { opacity: 1; }
.m-game-main { position: relative; width: 100%; height: 100%; transition: 0.3s; flex-grow: 1; overflow: hidden; border-radius: 14px; cursor: pointer; }
.m-game-main--shallow { border-radius: 14px; mask-image: -webkit-radial-gradient(center, white, black); flex-grow: initial; }
.m-game-main--grayscale img { filter: grayscale(100%); }
.game-card-wow-frame { --sprite-size: 40px; --border-image-width-x: 40; --border-image-width-y: 40; --border-image-width: calc(var(--border-image-width-y) * 1px) calc(var(--border-image-width-x) * 1px); --border-image-slice: calc( var(--border-image-width-y) * 3 ) calc(var(--border-image-width-x) * 3); position: relative; }
.game-card-wow-frame::after { content: ""; position: absolute; inset: 0px; border-image: var(--wow-game-card-border-image, none) var(--border-image-slice) fill/var(--border-image-width); pointer-events: none; transform-style: preserve-3d; }
.game-card-wow-frame__sprite { position: absolute; inset: 0px; }
.game-card-wow-frame__sprite::before, .game-card-wow-frame__sprite::after { background-image: var(--wow-game-card-sprite, none),var(--wow-game-card-sprite, none); content: ""; position: absolute; background-repeat: no-repeat; background-size: calc(var(--sprite-size)*4) var(--sprite-size); inset: 0px; margin: auto; z-index: 1; pointer-events: none; }
.game-card-wow-frame__sprite::after { height: var(--sprite-size); background-position: top 50% right calc(var(--sprite-size)*-3),top 50% left calc(var(--sprite-size)*-3); }
.game-card-wow-frame__sprite::before { width: var(--sprite-size); background-position: top 0 right calc(var(--sprite-size)*-2),bottom 0 left calc(var(--sprite-size)*-2); }
.m-card-thumb { position: relative; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: hidden; background-size: cover; background-position: center center; background-color: var(--color-dark-grey-2); border-radius: 14px; display: flex; flex-direction: column; transition: transform 0.25s ease-in-out; }
.m-card-thumb::before { content: ""; display: block; padding-top: 100%; }
.m-game-list--mobile .m-card-thumb::after { content: ""; width: 100%; height: 40px; position: absolute; bottom: 0px; background: var(--gradient-dark-grey-1-bottom); }
.m-card-thumb-video, .m-card-thumb-image, .m-card-thumb-preview { object-fit: cover; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.m-card-thumb-image { opacity: 0; transition: opacity 0.6s ease-in-out; }
.m-card-thumb-image.fadeIn { opacity: 1; }
.m-card-thumb-image--bottom { object-position: center bottom; }
.m-cdn-image { width: 100%; height: 100%; }
.m-game-footer { position: relative; display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; max-width: 100%; padding: 8px 0px 0px; border-radius: 0px 0px 14px 14px; }
.m-game-list--mobile .m-game-footer { padding: 2px 0px 0px; }
.m-game-footer-left { position: relative; flex-grow: 1; min-width: 0px; overflow: hidden; white-space: nowrap; }
.m-game-footer-left::after { content: ""; position: absolute; top: 0px; right: 0px; z-index: 1; width: 20px; height: 100%; background: var(--gradient-dark-grey-0-right); }
.m-game-footer-left--large::after { background: var(--gradient-dark-grey-0-right); }
.m-game-footer-provider { overflow: hidden; color: var(--color-mid-grey-2); text-overflow: ellipsis; }
.m-game-footer-name { display: block; min-width: 0px; max-width: 100%; overflow: hidden; color: var(--color-light-grey-5); text-overflow: ellipsis; cursor: pointer; }