.toplist-esi-homepage__wrapper {
    margin: 32px 0 52px;
}

.toplist-esi-homepage__offers {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.toplist-esi-homepage-skeleton__wrapper {
    position: relative;
    overflow: hidden;
    width: calc(25% - 10.5px);
    border-radius: 4px;
    background: #f2f2f2;
    display: inline-block;
    border: 0.5px solid #D9D9D9;
    margin-bottom: 14px;
    margin-right: 10px;
}

.toplist-esi-homepage-skeleton__wrapper:nth-child(4) {
    margin-right: 0;
}

.toplist-esi-homepage-skeleton__element {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    animation: skeleton-shimmer 1.5s infinite;
    background: linear-gradient(90deg, #e1e5eb 25%, #d1d6de 50%, #e1e5eb 75%);
    background-size: 200% 100%;
}

.toplist-esi-homepage-skeleton__logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 121px;
    padding: 36px 16px 16px;
    position: relative;
    flex-direction: column;
    gap: 6px;
    grid-area: logo;
    background: #FFF;
}

.toplist-esi-homepage-skeleton__label, .toplist-esi-homepage-skeleton__rating {
    height: 20px;
    position: absolute;
    top: 16px;
    width: calc(50% - 32px);
}

.toplist-esi-homepage-skeleton__label {
    left: 16px;
}

.toplist-esi-homepage-skeleton__rating {
    right: 16px;
}

.toplist-esi-homepage-skeleton__logo {
    width: 170px;
    height: 60px;
}

.toplist-esi-homepage-skeleton__title {
    margin: 16px;
    width: calc(100% - 32px);
    height: 88px;
    grid-area: title;
}

.toplist-esi-homepage-skeleton__cta-btn {
    margin: 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 32px);
    height: 48px;
    grid-area: cta-btn;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.toplist-esi-homepage__offer {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% / 4 - (14px * 3 / 4));
    border-radius: 4px;
    background: #f2f2f2;
}

.toplist-esi-homepage__offer-logo-wrapper {
    background: #fff;
}

.toplist-esi-homepage__offer-ribbon-wrapper {
    position: absolute;
    top: 16px;
    left: 16px;
    width: fit-content;
    transform: skew(-15deg);
    background: #eaffe8;
}

.toplist-esi-homepage__offer-ribbon {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 120%;
    display: flex;
    align-items: center;
    height: 20px;
    padding: 4px;
    transform: skew(15deg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #61a229;
    gap: 8px;
}

.toplist-esi-homepage__offer-ribbon:before {
    position: relative;
    width: 12px;
    height: 12px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M11.7539 0.00104771C9.41166 -0.0409512 6.74023 1.18302 5.04902 3.08272C3.41521 3.11708 1.85762 3.78036 0.700626 4.93443C0.667719 4.96722 0.64458 5.00852 0.633796 5.05371C0.623011 5.0989 0.625006 5.14619 0.639557 5.19031C0.654109 5.23443 0.680642 5.27364 0.716194 5.30354C0.751745 5.33345 0.794913 5.35288 0.840873 5.35966L2.76757 5.63566L2.52983 5.9019C2.48718 5.94952 2.46443 6.01169 2.46624 6.07559C2.46805 6.13949 2.4943 6.20026 2.53958 6.24539L5.75325 9.45906C5.79829 9.50451 5.85909 9.53087 5.92304 9.53269C5.987 9.5345 6.0492 9.51163 6.09674 9.46881L6.36298 9.23107L6.63898 11.1578C6.65248 11.2515 6.72673 11.3205 6.81597 11.3505C6.83899 11.3579 6.86303 11.3617 6.88722 11.3618C6.9596 11.3607 7.02883 11.332 7.08072 11.2815C8.22633 10.127 8.88352 8.57576 8.91592 6.94963C10.8179 5.25542 12.0516 2.58473 11.9976 0.244792C11.9961 0.180626 11.9699 0.11951 11.9245 0.074125C11.8791 0.0287403 11.818 0.00257157 11.7539 0.00104771ZM9.44991 4.31719C9.33395 4.43325 9.19621 4.52526 9.0446 4.58793C8.89299 4.65061 8.73049 4.68273 8.56643 4.68243C8.24619 4.68243 7.92595 4.56093 7.6822 4.31719C7.4484 4.08245 7.31713 3.76464 7.31713 3.43334C7.31713 3.10203 7.4484 2.78422 7.6822 2.54948C8.16969 2.062 8.96242 2.062 9.44991 2.54948C9.9374 3.03697 9.9374 3.8297 9.44991 4.31719Z' fill='%2361A229'%3E%3C/path%3E%3Cpath d='M1.36233 8.45184C0.826845 8.98658 0.0926129 11.4045 0.010865 11.6783C-0.000534856 11.7156 -0.00300596 11.755 0.00365037 11.7935C0.0103067 11.8319 0.0259039 11.8683 0.0491853 11.8996C0.0724666 11.9309 0.10278 11.9563 0.137681 11.9737C0.172582 11.9912 0.211093 12.0002 0.250109 12C0.274477 11.9998 0.298703 11.9963 0.322107 11.9895C0.59585 11.9078 3.01304 11.1728 3.54853 10.6373C3.82263 10.3442 3.9721 9.95614 3.96537 9.55494C3.95863 9.15374 3.79623 8.77087 3.51245 8.48718C3.22867 8.2035 2.84574 8.04123 2.44454 8.03463C2.04334 8.02804 1.65528 8.17764 1.36233 8.45184Z' fill='%23A3D89E'%3E%3C/path%3E%3C/svg%3E");
}

.toplist-esi-homepage__offer-rating-wrapper {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
}

.toplist-esi-homepage__offer-rating-score {
    font-family: proxima-nova, sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 120%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='22' viewBox='0 0 33 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.22414 0.5H32.5L24.7759 22H0.5L8.22414 0.5Z' fill='%239B3D7F'/%3E%3C/svg%3E%0A");
}

.toplist-esi-homepage__offer-rating-score:after {
    position: absolute;
    top: 0;
    right: -1px;
    width: 3px;
    height: 3.5px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='3' height='4' viewBox='0 0 3 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4L1.5 0.5L3 4H0Z' fill='%236F2759'/%3E%3C/svg%3E%0A");
}

.toplist-esi-homepage__offer-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 16px;
    margin-left: -8px;
    background-image: url("data:image/svg+xml,%3Csvg width='65' height='16' viewBox='0 0 65 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 0H64.5L59.25 16H0.25L5.5 0Z' fill='%23FFE8F7'/%3E%3C/svg%3E%0A");
}

.toplist-esi-homepage__offer-rating img {
    height: 8px !important;
}

.toplist-esi-homepage__offer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 44px;
    margin-bottom: 16px;
}

.toplist-esi-homepage__offer-logo img {
    width: 170px;
    height: 60px;
    object-fit: contain;
}

.toplist-esi-homepage__offer-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 16px;
}

.toplist-esi-homepage__offer-title {
    font-family: proxima-nova, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 16px;
    text-align: center;
    color: #464646;
}

.toplist-esi-homepage__offer-title span {
    font-family: Exo, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    display: block;
    text-align: center;
    color: #9b3d7f;
}

.toplist-esi-homepage__offer-cta-btn {
    font-family: proxima-nova, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 48px 0 8px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    border-radius: 2px;
    background: #61a229;
    gap: 8px;
}

.toplist-esi-homepage__offer-cta-btn:after {
    position: absolute;
    top: 12px;
    right: 8px;
    width: 32px;
    height: 24px;
    padding-left: 8px;
    content: '';
    border-left: 0.5px solid #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18.5L15 12.5L9 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
}

.toplist-esi-homepage__offer-cta-btn:hover {
    text-decoration: none;
    color: #fff;
    background: #519218;
}

@media (max-width: 991px) {
    .toplist-esi-homepage__wrapper {
        margin: 32px 0;
    }

    .toplist-esi-homepage__offers {
        flex-direction: column;
    }

    .toplist-esi-homepage-skeleton__wrapper {
        width: 100%;
        margin-right: 0;
    }

    .toplist-esi-homepage__offer {
        width: 100%;
    }
}