@media (min-width: 1280px) {
/** широкая морда **/

.os-tile{
display: inline-block;
width: 14vw;
height: 14vw;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}

.os-filler{
width: 14vw;
height: 14vw;
}

.os-title{
width: 14vw;
height: 2vw;
margin-left: 0.5vw;
line-height: 1.5vw;
top: 12vw;
font-size: 1.5vw;
}

.main-block-game{
display: grid;
grid-template-columns: 25% 1fr;
column-gap: 16px;
width: auto;
background-color: rgba(255, 255, 255, 0.88);
border-radius: 5px; margin: 8px;
padding: 8px 8px 8px 8px;
text-align: justify;
overflow: hidden;
}

.cover{
width: 100%;
min-height: 0;
border-radius: 5px;
grid-column: 1;
grid-row: 1 / -1;
}

}



@media (max-width: 1279px) {
/** узкая морда **/

.os-tile{
display: inline-block;
width: 30vw;
height: 30vw;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}

.os-filler{
width: 30vw;
height: 30vw;
}

.os-title{
width: 29vw;
height: 4vw;
margin-left: 1vw;
line-height: 4vw;
top: 25vw;
font-size: 3.25vw;
}

.main-block-game{
display: block;
width: 98%;
background-color: rgba(255, 255, 255, 0.88);
border-radius: 0px; margin: 8px 0px;
padding: 1%;
text-align: justify;
}

.cover{
display: none;
}

}



/** любая морда **/

.os-tile{
display: inline-block;
margin-bottom: 5px;
padding: 0px;
text-decoration: none;
background-color: #888;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 5px;
}

.os-filler{
background: rgba(0, 0, 0, 0.5);
background: linear-gradient(to top, black 0%, transparent 25%);
margin: 0px;
line-height: 25px;
border-radius: 0px 0px 5px 5px;
}

.os-title{
color: white;
position: relative;
text-align: left;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.os-tile:focus{
text-decoration: none;
}