.room-item {
    display: flex;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    margin-bottom: 24px;
}

.room-item__logo {
    display: block;
    background: #F3F5F9;
    min-width: 163px;
    max-width: 163px;
    padding: 0 14px;
}

.room-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform ease .2s;
}

.room-item__logo:hover img {
    transform: scale(.95);
}

.room-item__body {
    flex: 1;
    padding: 12px;
}

.room-item__body-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.room-item__title {
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
    transition: color ease .15s;
}

.room-item__rating {
    display: flex;
    gap: 14px;
    margin-left: auto;
}

.room-item__rating-best {
    align-self: center;
    font-size: 15px;
    color: #D5337C;
    font-weight: bold;
}

.room-item__rating-flag {
    position: relative;
    margin-top: -16px;
    width: 31px;
    height: 35px;
    background: #F03A8C;
    border-radius: 4px 4px 0 0;
    padding-top: 3px;
    text-align: center;
}

.room-item__rating-flag::before,
.room-item__rating-flag::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -7px;
}

.room-item__rating-flag::before {
    border-top: 9px solid #f03b8c;
    border-left: 20px solid transparent;
    right: 0;
    border-radius: 0 0 4px 0;
}

.room-item__rating-flag::after {
    border-top: 9px solid #f03b8c;
    border-right: 20px solid transparent;
    left: 0;
    border-radius: 0 0 0 4px;
}

.room-item__rating-flag svg {
    width: 18px;
    height: 18px;
}

.room-item__rating .room-rating {
    align-self: center;
    margin-left: auto;
}

.room-item__body-data {
    display: flex;
    gap: 24px;
    line-height: 20px;
    margin-bottom: 24px;
}

.room-item__body-data-item {
    flex: 1;
}

.room-item__body-data-item--bonus {
    min-width: 270px;
    max-width: 270px;
}

.room-item__body-data-item .label {
    font-size: 14px;
    color: #727272;
    margin-bottom: 5px;
}

.room-item__body-data-item .value {
    font-weight: bold;
}

.room-item__body-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

a.room-item__body-btn {
    display: block;
    border-radius: 4px;
    height: 44px;
    line-height: 42px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: all ease .2s;
}

a.room-item__body-btn--review {
    padding: 0 12px;
    color: #4D3BFE;
    border: 1px solid rgba(77, 59, 254, .3);
    font-size: 14px;
}

a.room-item__body-btn--review:hover {
    color: #fff;
    background: #4D3BFE;
}

a.room-item__body-btn--play {
    color: #fff;
    background: #D5337C;
    padding: 0 32px;
    margin-left: auto;
}

a.room-item__body-btn--play:empty {
    display: none;
}

a.room-item__body-btn--play:hover {
    background: #c21d68 ;
}

.room-item__body-promo {
    position: relative;
    flex: 1 0 300px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 2px;
    background: rgba(77, 59, 254, .11);
    border: 1px dashed rgba(77, 59, 254, .6);
    border-radius: 4px;
    transition: background ease .15s;
}

.room-item__body-promo:hover {
    background: rgba(77, 59, 254, 0.6);
}

.room-item__body-promo-text {
    font-size: 14px;
    color: #4D3BFE;
    font-weight: bold;
    padding: 0 10px;
    line-height: 18px;
    align-self: center;
    transition: color ease .15s;
}

.room-item__body-promo:hover .room-item__body-promo-text {
    color: #fff;
}

.room-item__body-promo .room-item__body-btn {
    position: relative;
    padding: 0 8px;
    min-height: 40px;
    font-weight: bold;
    color: #fff;
    background: #4D3BFE;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    transition: background ease .2s;
}

.room-item__body-promo .room-item__body-btn::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 16px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCAzNCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzMzNl83MDgpIiBmaWx0ZXI9InVybCgjZmlsdGVyMF9kXzMzNl83MDgpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy41MzE2IDI3SDI2LjExNDNDMjYuMTE0MyAyNC44MzYgMjcuMzEyNyAyMi42NzE5IDI3LjMxMjcgMjAuNTA3OEMyNy4zMTI3IDE4LjUgMjcuMzEyNyAxNy4yNDIyIDI3LjMxMjcgMTUuMjM0NEMyNy4zMTI3IDEyLjU0NCAyNC40MTc4IDExLjgxODUgMjMuNTU0NiAxMi43MTlDMjIuOTgwOCAxMS4zNjQgMjEuMDM4OCAxMC45NDc4IDIwLjA5OTEgMTEuNjhDMTkuMzk2NyAxMC4yNTYyIDE3LjE4MTIgMTAuMDkwOSAxNi42NTYxIDExLjAzOTZMMTYuNTI3NSA1LjEyNTI0QzE2LjUwNTEgNC4wOTQyNCAxNS43MTg2IDMuMjUwMjQgMTQuNzI5OSAzLjI1MDI0QzEzLjc0MTMgMy4yNTAyNCAxMi45MzI0IDQuMDkzOTkgMTIuOTMyNCA1LjEyNTI0VjE4LjI5NjlDMTAuODIwOSAxNy4yMTg4IDExLjMyNTYgMTUuNjQ5MSA5LjA0MzQ3IDE1LjE1N0M3LjU4OTI5IDE0Ljg0MzQgNi4yODI5MiAxNi4xMDggNi44MDQ5OCAxNi44OTczQzcuMTc0NDggMTcuNDU1OCA3LjkxODcyIDE4LjExODkgOC42MjYzNSAyMC4wNjE0QzEwLjA0MjggMjMuOTQ5NSAxMy41MzE2IDIzLjEwNzYgMTMuNTMxNiAyN1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjYuMTE0MyAyN0gxMy41MzE2SDEyLjkwOTZWMzEuMzc1SDI2LjczNjNWMjdIMjYuMTE0M1oiIGZpbGw9IiM0RDNCRkUiLz4KPHBhdGggZD0iTTI3LjkzNzYgMjAuNTA3N1YxNS4yMzQzQzI3LjkzNzYgMTMuNzI3MSAyNy4xNDE2IDEyLjUwNjUgMjUuODA4MyAxMS45NjkxQzI1LjA5MDUgMTEuNjc5OSAyNC4zNDc0IDExLjY1MjQgMjMuNzY1MyAxMS44NjUxQzIzLjUgMTEuNTI3NiAyMy4xNDk4IDExLjI0NDkgMjIuNzI5MiAxMS4wMzlDMjEuOTI3OSAxMC42NDY5IDIxLjAyMjEgMTAuNTkzMSAyMC4yOTg2IDEwLjg2MzlDMTkuOTIxOSAxMC40MTg4IDE5LjM5NDQgMTAuMDg3NSAxOC43NTkyIDkuOTIzMjJDMTguMjI3NiA5Ljc4NTcyIDE3LjcwNTMgOS43ODY0NyAxNy4yNTY2IDkuOTA1NzhMMTcuMTUyNCA1LjExMTU1QzE3LjEyMiAzLjcxNzMgMTYuMDU3OSAyLjYyNTE4IDE0LjcyOTkgMi42MjUxOEMxMy4zOTQxIDIuNjI1MTggMTIuMzA3NCAzLjc0NjY4IDEyLjMwNzQgNS4xMjUxN1YxNy4wOTNDMTIuMDU1NSAxNi44NDI4IDExLjg2ODYgMTYuNTc4NiAxMS42NzYxIDE2LjMwNjZDMTEuMTk4MiAxNS42MzExIDEwLjY1NjcgMTQuODY1NSA5LjE3NTE2IDE0LjU0NkM3LjkyMDQxIDE0LjI3NTUgNi44Mzk3MyAxNC44OTc0IDYuMzY2NjcgMTUuNTg5N0M1Ljk5MjU0IDE2LjEzNzMgNS45NjE0OCAxNi43NTUgNi4yODM2NyAxNy4yNDIxQzYuMzc4NzMgMTcuMzg1NyA2LjQ4OTkyIDE3LjUyODcgNi42MDc2NyAxNy42ODAxQzYuOTkzNDIgMTguMTc2IDcuNTIxNjYgMTguODU1MSA4LjAzOTA0IDIwLjI3NTNDOC43NTk2NiAyMi4yNTM0IDEwLjAwNDMgMjMuMTQ2IDExLjAwNDQgMjMuODYzMkMxMS45NjkxIDI0LjU1NSAxMi42OTc3IDI1LjA3ODIgMTIuODY4MiAyNi4zNzcyQzEyLjU0MjQgMjYuMzk4NSAxMi4yODQ2IDI2LjY2ODggMTIuMjg0NiAyNy4wMDAxVjMxLjM3NTFDMTIuMjg0NiAzMS43MjAzIDEyLjU2NDUgMzIuMDAwMSAxMi45MDk2IDMyLjAwMDFIMjYuNzM2MkMyNy4wODEzIDMyLjAwMDEgMjcuMzYxMiAzMS43MjAzIDI3LjM2MTIgMzEuMzc1MVYyNy4wMDAxQzI3LjM2MTIgMjYuNjY3NSAyNy4xMDEyIDI2LjM5NjQgMjYuNzczNSAyNi4zNzdDMjYuODU2NyAyNS41ODA1IDI3LjA4MDggMjQuNzY5NSAyNy4zMTU4IDIzLjkyMDdDMjcuNjIxNSAyMi44MTY1IDI3LjkzNzYgMjEuNjc0NyAyNy45Mzc2IDIwLjUwNzdaTTI2LjExMTIgMzAuNzVIMTMuNTM0NlYyNy42MjVIMTcuMDEwMkMxNy4zNTUzIDI3LjYyNSAxNy42MzUyIDI3LjM0NTIgMTcuNjM1MiAyN0MxNy42MzUyIDI2LjY1NDggMTcuMzU1MyAyNi4zNzUgMTcuMDEwMiAyNi4zNzVIMTQuMTI1OUMxMy45MzA2IDI0LjQyNDcgMTIuODE1MyAyMy42MjM1IDExLjczMyAyMi44NDc0QzEwLjc4MzcgMjIuMTY2NSA5LjgwMjAzIDIxLjQ2MjcgOS4yMTM1OSAxOS44NDc0QzguNjI4OTcgMTguMjQyNiA4LjAwNjQxIDE3LjQ0MjIgNy41OTQzNSAxNi45MTI1QzcuNDg3MjkgMTYuNzc0OSA3LjM5NDg1IDE2LjY1NiA3LjMyNjI5IDE2LjU1MjNDNy4yNzY4NSAxNi40Nzc2IDcuMzg2MjMgMTYuMzEzMyA3LjM5ODg1IDE2LjI5NDhDNy42NDUwNCAxNS45MzQzIDguMjU4OTEgMTUuNjI3MSA4LjkxMTY2IDE1Ljc2NzlDOS45MTczNCAxNS45ODQ4IDEwLjIxMSAxNi4zOTk5IDEwLjY1NTcgMTcuMDI4NEMxMS4wMTAzIDE3LjUyOTggMTEuNDQyMyAxOC4xNDA0IDEyLjMwNzQgMTguNjY0VjE4LjkyMTlDMTIuMzA3NCAxOS4yNjcxIDEyLjU4NzMgMTkuNTQ2OSAxMi45MzI0IDE5LjU0NjlDMTMuMjc3NSAxOS41NDY5IDEzLjU1NzQgMTkuMjY3MSAxMy41NTc0IDE4LjkyMTlWNS4xMjUxN0MxMy41NTc0IDQuNDM1OTMgMTQuMDgzNCAzLjg3NTE4IDE0LjcyOTkgMy44NzUxOEMxNS4zNjE0IDMuODc1MTggMTUuODg3NSA0LjQ0MjA1IDE1LjkwMjYgNS4xMzg3NEwxNi4wODI0IDEzLjQwNDNDMTYuMDg5OSAxMy43NDkzIDE2LjM3NDMgMTQuMDI1MyAxNi43MjA5IDE0LjAxNTVDMTcuMDY1OSAxNC4wMDggMTcuMzM5NiAxMy43MjIyIDE3LjMzMjEgMTMuMzc3MUwxNy4yODU4IDExLjI0NzJDMTcuNDg4NCAxMS4wODMzIDE3Ljk0NTYgMTEuMDAzOSAxOC40NDYzIDExLjEzMzRDMTguNzM3NyAxMS4yMDg4IDE5LjY4ODYgMTEuNTQwNSAxOS42ODg2IDEyLjY0NDVDMTkuNjg4NiAxMi45ODk3IDE5Ljk2ODQgMTMuMjY5NSAyMC4zMTM2IDEzLjI2OTVDMjAuNjU4NyAxMy4yNjk1IDIwLjkzODUgMTIuOTg5NyAyMC45Mzg1IDEyLjY0NDVDMjAuOTM4NSAxMi40MjAzIDIwLjkxMzUgMTIuMjAzMSAyMC44NjU0IDExLjk5NTVDMjEuMjUyNCAxMS44OTgxIDIxLjc1MyAxMS45NTMgMjIuMTc5NyAxMi4xNjE4QzIyLjUyMDYgMTIuMzI4NiAyMy4wOTI1IDEyLjczMDUgMjMuMDkyNSAxMy41NDY4QzIzLjA5MjUgMTMuODkyIDIzLjM3MjQgMTQuMTcxOCAyMy43MTc1IDE0LjE3MThDMjQuMDYyNyAxNC4xNzE4IDI0LjM0MjUgMTMuODkyIDI0LjM0MjUgMTMuNTQ2OEMyNC4zNDI1IDEzLjM2MzMgMjQuMzI1IDEzLjE4MzggMjQuMjkwOCAxMy4wMDk4QzI0LjU1NzIgMTIuOTQ2OCAyNC45NDQyIDEyLjk2ODYgMjUuMzQxIDEzLjEyODVDMjUuNzQ2IDEzLjI5MTYgMjYuNjg3NyAxMy44MjM1IDI2LjY4NzcgMTUuMjM0M1YyMC41MDc3QzI2LjY4NzcgMjEuNTA0OCAyNi40MDc3IDIyLjUxNjIgMjYuMTExMSAyMy41ODdDMjUuODYwMiAyNC40OTMyIDI1LjYwMjggMjUuNDI0OSAyNS41MTg0IDI2LjM3NDlIMjIuNjM1MkMyMi4yOSAyNi4zNzQ5IDIyLjAxMDIgMjYuNjU0NyAyMi4wMTAyIDI2Ljk5OTlDMjIuMDEwMiAyNy4zNDUxIDIyLjI5IDI3LjYyNDkgMjIuNjM1MiAyNy42MjQ5SDI2LjExMTJWMzAuNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTAuMjI5OCA1Ljc1MDE5QzEwLjU3NDkgNS43NTAxOSAxMC44NTQ4IDUuNDcwMzggMTAuODU0OCA1LjEyNTE5QzEwLjg1NDggMi45ODgzNyAxMi41OTMxIDEuMjUgMTQuNzI5OSAxLjI1QzE2Ljg2NjcgMS4yNSAxOC42MDUxIDIuOTg4MzcgMTguNjA1MSA1LjEyNTE5QzE4LjYwNTEgNS40NzAzOCAxOC44ODUgNS43NTAxOSAxOS4yMzAxIDUuNzUwMTlDMTkuNTc1MiA1Ljc1MDE5IDE5Ljg1NTEgNS40NzAzOCAxOS44NTUxIDUuMTI1MTlDMTkuODU1MSAyLjI5OTEyIDE3LjU1NiAwIDE0LjcyOTkgMEMxMS45MDM5IDAgOS42MDQ3OCAyLjI5OTEyIDkuNjA0NzggNS4xMjUxOUM5LjYwNDc4IDUuNDcwMzggOS44ODQ1OSA1Ljc1MDE5IDEwLjIyOTggNS43NTAxOVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOS44MjI5IDI2LjM3NUgxOS44MjI0QzE5LjQ3NzMgMjYuMzc1IDE5LjE5NzcgMjYuNjU0OCAxOS4xOTc3IDI3QzE5LjE5NzcgMjcuMzQ1MiAxOS40Nzc3IDI3LjYyNSAxOS44MjI5IDI3LjYyNUMyMC4xNjgxIDI3LjYyNSAyMC40NDc5IDI3LjM0NTIgMjAuNDQ3OSAyN0MyMC40NDc5IDI2LjY1NDggMjAuMTY4MSAyNi4zNzUgMTkuODIyOSAyNi4zNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfMzM2XzcwOCIgeD0iLTUiIHk9IjAiIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSI2Ii8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMjIgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18zMzZfNzA4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzMzNl83MDgiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzM2XzcwOCI+CjxyZWN0IHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEpIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-size: 32px;
}

@media (max-width: 1200px) {
    .room-item {
        position: relative;
        display: block;
    }

    .room-item__logo {
        min-width: unset;
        max-width: 100%;
        min-height: 64px;
        padding: 8px;
    }

    .room-item__logo img {
        max-width: 125px;
        height: 48px;
    }

    .room-item__body {
        padding: 4px 8px 8px 8px;
    }

    .room-item__title,
    .room-item__rating-flag {
        display: none;
    }

    .room-item__body-header {
        position: absolute;
        top: -2px;
        left: 144px;
        padding: 0;
        margin: 0;
        border: none;
        min-height: 64px;
    }

    .room-item__rating {    
        display: block;
    }

    .room-item__rating-best {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .room-item__rating .room-rating {
        margin: 0;
        align-self: flex-start;
    }

    a.room-item__body-btn--play {
        padding: 0 20px;
    }
}

@media (max-width: 991px) {
    a.room-item__body-btn--play {
        padding: 0 32px;
    }
}

@media (max-width: 576px) {
    .room-item__body-data {
        margin-bottom: 10px;
    }

    .room-item__body-data-item:not(.room-item__body-data-item--bonus) {
        display: none;
    }

    .room-item__body-data-item--bonus {
        min-width: unset;
        max-width: 100%;
    }

    .room-item__body-promo {
        flex: 1 0 100%;
        order: 0;
    }

    .room-item__body-promo .room-item__body-btn {
        padding: 0 20px;
    }

    .room-item__body-promo .room-item__body-btn::after {
        right: -8px;
    }

    .room-item__body-btns {
        flex-wrap: wrap;
    }

    a.room-item__body-btn {
        flex: 1;
        height: 40px;
        line-height: 38px;
    }

    a.room-item__body-btn--review {
        order: 2;
    }

    a.room-item__body-btn--play {
        order: 3;
        padding: 0 20px;
    }
}