.x2ul{display: flex; flex-wrap:wrap; margin:0; padding:0;}
.x2li{margin:10px; padding:10px; perspective:200px; overflow: hidden; position: relative; width: 155px; display:flex; flex-direction: column;}
.x2i{width: 180px; display: block; transition:0.5s all; margin:auto;}
.x2i{transform:translate3d(-10px,0,0) scale(0.95) rotateY(-10deg);}
.x2s4, .x2s5, .x2a2{font-family:'PT Sans', sans-serif; font-weight: bold; text-align: center;color: #ecd8d8;}
.x2s4{font-size: 15px;}
.x2s5{font-size: 13px; display: flex; justify-content: space-evenly; align-items: center;}
.x2a2{font-size: 16px; color:#920000; transition:1s all; }
.x2a2:hover{ color:#d21f1f; }
.x2a3{display: inline-block; margin:0 5px;}
.x2i2{width:25px;}
.x2li:hover .x2i{transform:translate3d(10px,0,0) scale(0.75) rotateY(-40deg);}
.x2li:hover .x2a{transform:translate3d(0,0,0); background-color: #736464;}
.x2s{color: #825252; margin-left:5px; font-weight: bold; font-size: 13px;}
.x2a{width: 50px; height: 50px; background:url('../img/icons/play.svg') no-repeat center center #540b0b; border-radius:60px; transform:translate3d(-68px,0,0); position: absolute; top:25%; transition:0.5s all;}
.x2li .x2a:hover{ background-color:#d21f1f; }
.x2s2,.x2s3{
    font-weight: bold;
    text-transform: uppercase;
    color: #629412;
    float: right;
    margin-top: -29px;
    border: 2px solid;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 14px;
}
.x2s3{color:#9e4409}
.x2bt{margin: 0px;
    background: #c7c7c7;
    border: 0;
    color: #000;
    border-radius: 2px;
    padding: 2px 8px;
}
.x2bt:hover{background:#790905; color: #fff;}
.x2e{display: inline-block;}
.x2e1{border:1px solid #2b2a2a;  border-radius: 5px;  width:188px;}
.x2li[data-selected="1"]{background:#790905}

@media screen and (max-width:660px){
    .x2ul{
        flex-direction:column;
        align-items:stretch;
        padding:0 12px;
        box-sizing:border-box;
    }
    .x2li,
    .x2li.x2e1{
        display:grid;
        grid-template-columns:96px minmax(0,1fr) 44px;
        grid-template-rows:auto 1fr 1fr;
        column-gap:14px;
        row-gap:6px;
        align-items:center;
        width:100%;
        max-width:100%;
        margin:8px 0;
        padding:12px 14px;
        box-sizing:border-box;
        perspective:none;
        overflow:visible;
    }
    .x2e1{
        width:100%;
        border-radius:8px;
    }
    .x2i{
        grid-column:1;
        grid-row:1 / -1;
        width:96px;
        height:auto;
        margin:0;
        align-self:center;
        transform:none;
        border-radius:4px;
        object-fit:cover;
    }
    .x2li:hover .x2i{
        transform:none;
    }
    .x2s4,
    .x2s5{
        min-width:0;
        overflow-wrap:break-word;
    }
    .x2s4{
        grid-column:2;
        grid-row:1;
        text-align:left;
        font-size:14px;
        line-height:1.35;
        align-self:end;
    }
    .x2li > span:nth-of-type(2),
    .x2li > span:nth-of-type(3){
        grid-column:2;
        justify-content:flex-start;
        align-items:center;
        gap:10px;
        text-align:left;
        font-size:12px;
        width:100%;
        max-width:100%;
    }
    .x2li > span:nth-of-type(2){
        grid-row:2;
        align-self:end;
        flex-wrap:nowrap;
    }
    .x2li > span:nth-of-type(3){
        grid-row:3;
        align-self:start;
        flex-wrap:wrap;
    }
    .x2li > span:nth-of-type(2) .x2a2{
        min-width:0;
        flex:1 1 auto;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        text-align:left;
    }
    .x2li > span:nth-of-type(2) .x2a3{
        flex-shrink:0;
    }
    .x2s{
        margin-left:0;
    }
    .x2a{
        grid-column:3;
        grid-row:1 / -1;
        position:relative;
        top:auto;
        transform:none;
        align-self:center;
        justify-self:center;
        width:44px;
        height:44px;
        background-size:22px;
    }
    .x2li:hover .x2a{
        transform:none;
        background-color:#540b0b;
    }
}