@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@700;800&family=Chivo:wght@800&family=Inter:opsz@14..32&display=swap');

.toplist-sportscasting__wrapper {
    margin: 24px 0;
}

.toplist-sportscasting__offers {
    counter-reset: toplist-sportscasting-counter 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toplist-sportscasting__offer {
    display: grid;
    padding: 24px;
    counter-increment: toplist-sportscasting-counter 1;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.06);
    grid-template-rows: auto;
    grid-template-columns: 200px auto 180px;
    grid-template-areas:
    "logo main cta-btn";
    gap: 24px;
}

.toplist-sportscasting__offer-logo::before {
    font-family: 'Chivo', serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 125%;
    position: relative;
    top: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    content: counter(toplist-sportscasting-counter);
    color: #071933;
    border-radius: 15px;
    background: #FFFFFF;
}

.toplist-sportscasting__offer-logo-wrapper {
    grid-area: logo;
}

.toplist-sportscasting__offer-logo {
    position: relative;
    display: block;
    width: 100%;
    height: 96px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.toplist-sportscasting__offer-logo img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.toplist-sportscasting__offer-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: #E5F7FF;
}

.toplist-sportscasting__offer-rating::before {
    position: relative;
    top: -1px;
    display: block;
    width: 13px;
    height: 13px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M10.0004 12.4675C9.8995 12.4679 9.79994 12.4441 9.71004 12.398L6.49052 10.7126L3.27099 12.398C3.16645 12.453 3.04858 12.4775 2.93079 12.4689C2.81299 12.4602 2.69999 12.4187 2.60464 12.3489C2.50928 12.2792 2.43539 12.1842 2.39138 12.0745C2.34736 11.9649 2.33498 11.8452 2.35564 11.7289L2.98692 8.17481L0.386043 5.64967C0.3049 5.5687 0.247336 5.46715 0.219532 5.35593C0.191728 5.24472 0.194734 5.12803 0.228226 5.01839C0.264815 4.9062 0.33212 4.80651 0.422506 4.73063C0.512884 4.65475 0.622726 4.60573 0.73956 4.58912L4.33786 4.06516L5.92237 0.826694C5.97406 0.71996 6.05477 0.629949 6.15526 0.566967C6.25574 0.503986 6.37193 0.470581 6.49052 0.470581C6.60912 0.470581 6.72531 0.503986 6.82579 0.566967C6.92628 0.629949 7.00701 0.71996 7.05867 0.826694L8.66212 4.05885L12.2604 4.58281C12.3773 4.59942 12.4871 4.64844 12.5775 4.72432C12.6679 4.80019 12.7351 4.89989 12.7718 5.01208C12.8053 5.12171 12.8083 5.2384 12.7804 5.34962C12.7527 5.46084 12.6951 5.56238 12.6139 5.64336L10.0131 8.16846L10.6443 11.7226C10.6669 11.8409 10.6551 11.9633 10.6104 12.0751C10.5656 12.187 10.4898 12.2837 10.3918 12.3539C10.2775 12.434 10.1399 12.4739 10.0004 12.4675Z' fill='%2300A1E6'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.toplist-sportscasting__offer-rating-number {
    font-family: 'Barlow', serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 100%;
    margin: 0 8px 0 4px;
    color: #071933;
}

.toplist-sportscasting__offer-rating-number span {
    font-size: 20px;
}

.toplist-sportscasting__offer-rating-text {
    font-family: 'Inter', serif;
    font-size: 12px;
    line-height: 150%;
    color: #152872;
}

.toplist-sportscasting__offer-main {
    grid-area: main;
}

.toplist-sportscasting__offer-title p {
    font-family: 'Barlow', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 135%;
    margin-bottom: 8px;
    color: #071933;
}

.toplist-sportscasting__offer-key-features {
    margin-bottom: 0 !important;
}

.toplist-sportscasting__offer-key-features li {
    font-family: 'Inter', serif;
    font-size: 16px;
    line-height: 150%;
    color: #2F3752;
}

.toplist-sportscasting__offer-key-features li::marker {
    color: #00A1E5
}

.toplist-sportscasting__offer-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    grid-area: cta-btn;
}

.toplist-sportscasting__offer-cta-btn {
    font-family: 'Barlow', serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 135%;
    display: flex;
    justify-content: center;
    width: 180px;
    padding: 12px 8px;
    text-align: center;
    letter-spacing: 0.18px;
    color: #FFF;
    border-radius: 52px;
    background: #0958CE;
}

.toplist-sportscasting__offer-actions span {
    font-family: 'Inter', serif;
    font-size: 12px;
    line-height: 150%;
    margin-top: 8px;
    text-align: center;
    color: #4F5869;
}

.toplist-sportscasting__show-more-btn {
    font-family: 'Barlow', serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 28px;
    top: 380px;
    left: 568px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 52px;
    margin: 16px auto 0;
    padding: 0 16px;
    text-align: center;
    text-transform: capitalize;
    color: #031129;
    border: 2px solid #031129;
    border-radius: 8px;
    gap: 8px;
}

.toplist-sportscasting__show-more-btn:hover {
    cursor: pointer;
    color: #46556F;
    border: 2px solid #46556F;
}

@media screen and (max-width: 991px) {
    .toplist-sportscasting__wrapper {
        margin: 20px 0;
    }

    .toplist-sportscasting__offer {
        padding: 0;
        grid-template-columns: auto;
        gap: 16px;
        grid-template-areas:
        "logo"
        "main"
        "cta-btn";
    }

    .toplist-sportscasting__offer-main {
        padding: 0 16px;
    }

    .toplist-sportscasting__offer-title p {
        text-align: center;
    }

    .toplist-sportscasting__offer-actions {
        padding: 0 16px 16px;
    }
}