/* TOP-100 SECTION
----------------------------------------------- */
.top-ratings {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px 20px; grid-auto-flow: row dense;}
.tr-item {counter-increment: item; display: flex; position: relative;}
.tr-item::before {position: absolute; content: ""; right: 0; bottom: 0; width: calc(100% - 153px);
    background-color: #212121; height: 1px;}
.fr-item::after {display: none;}
.tr-item::after {content: counter(item); font-weight: 700; font-size: 25px; color: #4e4e4e; right: 0; top: 0;}
.tr-item img {align-self: center; width: 133px; height: 200px; border-radius: 8px; margin-right: 20px;
    transition: transform .1s ease-in-out; flex-shrink: 0; display: block;}
.tr-item:hover img {transform: scale(1.02);}
.fr-item .tr-content {padding: 0;}
.tr-content, .tr-num {padding: 15px 0;}
.tr-content__title {color: #fff; font-weight: 600; font-size: 16px;}
.tr-content__info {color: #c3c3c3; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #212121;}
.tr-content__description {color: #c3c3c3;}

.tr-badge {position: absolute; display: flex; align-items: center; z-index: 5; left: 0; padding: 3px 10px;
    border-radius: 0 6px 6px 0; font-size: 13px; transition: .2s ease-in-out; font-weight: 600;}
.tr-badge.green { background-color: #3bb33b; color: #fff; }
.tr-badge.gray { background-color: #16131e; color: #fff; }
.tr-badge.red { background-color: #e90c0c; color: #fff; }
.tr-badge svg {margin-right: 5px; width: 15px; height: 15px;}
.tr-item:hover .tr-badge {opacity: 0;}


.tr-type {top: 10px; background-color: #16131e; color: #fff;}
.tr-rating {top: 36px;}



.watch-btn {background: #b21735;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    margin-top: 10px;
    color: #fff;
    border-radius: 6px;
    transition: .2s ease-in-out;
}

.watch-btn:hover {
    background: #950d28;
}

@media screen and (max-width: 1220px) {
    .top-ratings {
        grid-template-columns: 1fr;
    }
}