@import url('https://fonts.googleapis.com/css2?&family=Montserrat:wght@400;600;700&display=swap');

.toplist-casino-listing-21__wrapper {
    margin: 24px 0;
}

.toplist-casino-listing-21__offers {
    display: flex;
    flex-direction: column;
    counter-reset: toplist-casino-listing-21-counter 0;
    gap: 15px;
}

.toplist-casino-listing-21__offer {
    display: grid;
    padding: 20px;
    counter-increment: toplist-casino-listing-21-counter 1;
    transition: all 0.3s ease;
    animation: fadeIn ease 1s;
    border: 1px solid #0000;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 2px 12px 0 #00000026;
    gap: 20px;
    grid-template-areas: 'logo title rating key-features cta-btn';
    grid-template-columns: 220px 267px 128px auto 170px;
}

.toplist-casino-listing-21__offer:hover {
    border: 1px solid #cbc3c3;
}

.toplist-casino-listing-21__offer.hidden {
    display: none;
}

.toplist-casino-listing-21__offer-logo-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    grid-area: logo;
}

.toplist-casino-listing-21__offer-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 110px;
    border-radius: 6px;
}

.toplist-casino-listing-21__offer-logo:before {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-self: center;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: space-between;
    width: 27px;
    height: 27px;
    margin-right: 5px;
    padding: 3px 0;
    content: counter(toplist-casino-listing-21-counter);
    color: #fff;
    border-radius: 0 0 6px;
    background: #ffffff7f;
    box-shadow: 0 4px 13px 0 #0000003f;
    text-shadow: 0 0 2px #222;
}

.toplist-casino-listing-21__offer-logo img {
    width: 220px;
    height: 110px;
    border-radius: inherit;
    object-fit: contain;
}

.toplist-casino-listing-21__offer-brand {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    margin-top: 15px;
    text-align: center;
    color: #000;
}

.toplist-casino-listing-21__offer-title {
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    align-content: center;
    padding: 12px;
    text-align: center;
    color: #000;
    border-radius: 15px;
    background: #f8f8f8;
    grid-area: title;
}

.toplist-casino-listing-21__offer-rating {
    align-content: center;
    padding: 12px 12px 12px 5px;
    text-align: center;
    border-radius: 15px;
    background: #f8f8f8;
    grid-area: rating;
}

.toplist-casino-listing-21__offer-rating-number {
    font-family: Montserrat, sans-serif;
    font-size: 26px;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
    text-align: center;
    color: #000;
}

.toplist-casino-listing-21__offer-rating-number:before {
    position: relative;
    top: 7px;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0935 7.50828C21.0615 7.5882 20.896 7.82671 20.1804 8.53294C20.04 8.67128 19.879 8.82747 19.6932 9.00431C18.8998 9.75922 17.9104 10.6504 17.1879 11.3011C16.4497 11.9659 16.0931 12.2884 16.0428 12.3602C15.9686 12.4661 16.0343 12.83 16.4809 14.7933C16.6988 15.7499 16.9454 16.8337 17.1081 17.7128C17.3547 19.0457 17.2865 19.2831 17.2561 19.3244C17.2127 19.3423 16.9961 19.3459 15.9682 18.7853C15.2758 18.4073 14.4344 17.8962 13.6203 17.4017C12.1498 16.5084 11.3052 16.003 11.0525 16.003C10.7742 16.003 9.6997 16.6156 7.96347 17.6248C6.75663 18.3266 5.11421 19.2815 4.82373 19.3025C4.80059 19.2348 4.77549 18.9606 4.98192 17.8641C5.13081 17.0727 5.34943 16.1053 5.56039 15.1698C5.97823 13.3216 6.14127 12.5517 6.07354 12.381C6.00662 12.2118 5.37377 11.6277 3.94587 10.3348C3.40352 9.84359 2.73013 9.23392 2.16465 8.70167C1.57323 8.14434 1.09986 7.67172 1.01709 7.50703C1.33672 7.3379 3.57186 7.10059 5.06789 6.94155C7.04178 6.73223 7.85792 6.63652 7.98211 6.53226C8.08797 6.44344 8.33747 5.88606 8.97148 4.43301C9.36903 3.52151 9.81971 2.48831 10.2168 1.65958C10.8026 0.43655 11.0018 0.236175 11.0573 0.205338C11.1145 0.234528 11.3177 0.4321 11.9096 1.67177C12.31 2.51025 12.7611 3.55195 13.159 4.47075C13.7127 5.74976 14.0068 6.42195 14.118 6.52781C14.2542 6.65761 15.1106 6.75537 17.1802 6.96389C18.0881 7.05556 19.0267 7.15007 19.7723 7.24823C20.7573 7.37768 21.023 7.46654 21.0935 7.50828Z' fill='url(%23paint0_linear_5451_9031)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_5451_9031' x1='11.1625' y1='3.81436' x2='10.7163' y2='19.1885' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ffcb00'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 28px;
}

.toplist-casino-listing-21__offer-rating-number span {
    font-size: 18px;
    font-weight: 600;
    align-content: end;
    padding-bottom: 2px;
}

.toplist-casino-listing-21__offer-key-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none !important;
    grid-area: key-features;
}

.toplist-casino-listing-21__offer-key-features li {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    position: relative;
    display: flex;
    padding-bottom: 0 !important;
    padding-left: 25px;
    color: #000;
}

.toplist-casino-listing-21__offer-key-features li:not(:last-child) {
    margin-bottom: 15px;
}

.toplist-casino-listing-21__offer-key-features li:before {
    position: absolute;
    top: -1px;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 100%;
    min-height: 20px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='20' height='20' viewBox='0 0 256 256' xml:space='preserve'%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)'%3E%3Cpolygon points='37.95,64.44 23.78,50.27 30.85,43.2 37.95,50.3 59.15,29.1 66.22,36.17 ' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: %23009e04; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) '/%3E%3Cpath d='M 45 90 C 20.187 90 0 69.813 0 45 C 0 20.187 20.187 0 45 0 c 24.813 0 45 20.187 45 45 C 90 69.813 69.813 90 45 90 z M 45 10 c -19.299 0 -35 15.701 -35 35 s 15.701 35 35 35 s 35 -15.701 35 -35 S 64.299 10 45 10 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: %23009e04; fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.toplist-casino-listing-21__offer-cta-btn {
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 64px;
    margin: auto;
    text-align: center;
    color: #fff !important;
    border-radius: 6px;
    background: #35b3db;
    grid-area: cta-btn;
}

.toplist-casino-listing-21__offer-cta-btn:hover {
    text-decoration: unset;
    background: #2fa1c5;
}

.toplist-casino-listing-21__show-more-btn {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 54px;
    margin: 30px auto 0;
    padding: 15px 30px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 5px;
    background: #35b3db;
    box-shadow: 0 4px 23px 0 #0000003f;
}

.toplist-casino-listing-21__show-more-btn:hover {
    background: #2fa1c5;
}

@media (max-width: 991px) {
    .toplist-casino-listing-21__offer {
        padding: 15px 15px 30px;
        grid-template-areas:
            'logo'
            'title'
            'rating'
            'key-features'
            'cta-btn';
        grid-template-columns: auto;
    }

    .toplist-casino-listing-21__offer-logo,
    .toplist-casino-listing-21__offer-logo img {
        width: 100%;
        height: 173px;
    }

    .toplist-casino-listing-21__offer-title,
    .toplist-casino-listing-21__offer-rating,
    .toplist-casino-listing-21__offer-key-features,
    .toplist-casino-listing-21__offer-cta-btn {
        margin: 5px 0;
    }

    .toplist-casino-listing-21__offer-key-features {
        margin-right: auto !important;
        margin-left: auto !important;
        gap: 10px;
    }

    .toplist-casino-listing-21__offer-key-features li:not(:last-child) {
        margin-bottom: 10px;
    }

    .toplist-casino-listing-21__offer-cta-btn {
        width: 100%;
    }
}