.compare {
    margin-top: 20px;
    padding: 20px 10px;
    background-color: #f8f8f8;
    border-radius: 10px;
}

.compare__title {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
}

.compare__cols {
    display: flex;
    flex-direction: column;
}

.compare__col {
    margin-bottom: 20px;
}

.compare__col:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.compare__list {
    margin: 0;
    padding: 0 0 0 10px;
    list-style: none;
}

.compare__item {
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    line-height: 18px;
}

.compare__item:not(:last-child) {
    margin-bottom: 15px;
}

.compare__item:before {
    content: "" !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px !important;
    height: 18px !important;
    margin: 4px 10px 0 0 !important;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
    transform: none !important;
}

.compare__item--like:before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3971 8.36875C17.3971 7.39731 16.6099 6.61015 15.6388 6.61015H13.1463C13.8663 4.8088 13.9188 3.33191 13.9142 2.85885C13.9136 2.80686 13.9254 2.62259 13.9254 2.58176V2.49983C13.8731 0.789128 13.3494 0.265438 12.6768 0.0161133C11.9871 0.0161133 11.428 0.574916 11.428 1.26464V1.38958C11.4212 1.81718 10.8205 2.69935 10.8205 2.69935L6.23848 7.33417L6.16118 7.42916L4.76758 11.156L6.16118 16.9345C6.16118 17.1098 6.30326 17.2516 6.47828 17.2516H15.1047C15.6916 17.2516 16.1905 16.8237 16.2792 16.2434C16.6184 14.0251 17.3971 8.87747 17.3971 8.36875Z' fill='%2324DDA5'/%3E%3Cpath d='M5.16606 17.9562H2.02637C1.47682 17.9562 1.03125 17.5107 1.03125 16.9609V7.53443C1.03125 6.98461 1.47682 6.53931 2.02637 6.53931H5.16606C5.71561 6.53931 6.16118 6.98461 6.16118 7.53443V16.9609C6.16118 17.5107 5.71561 17.9562 5.16606 17.9562Z' fill='%230ABD87'/%3E%3Cpath d='M5.16606 16.0812H2.02637C1.47682 16.0812 1.03125 15.6356 1.03125 15.0858V16.9609C1.03125 17.5107 1.47682 17.9563 2.02637 17.9563H5.16606C5.71561 17.9563 6.16118 17.5107 6.16118 16.9609V15.0858C6.16118 15.6356 5.71561 16.0812 5.16606 16.0812Z' fill='%2300B67F'/%3E%3Cpath d='M15.6387 6.61023H15.3162C15.2998 6.76483 15.2751 6.96734 15.244 7.20741C14.6534 11.7744 10.7655 15.1942 6.16113 15.1942V16.9343C6.16113 17.1096 6.30321 17.2517 6.47823 17.2517H15.1047C15.6915 17.2517 16.1904 16.8235 16.2792 16.2435C16.6183 14.0252 17.397 8.87755 17.397 8.36856C17.397 7.3974 16.6099 6.61023 15.6387 6.61023Z' fill='%230FD55E'/%3E%3C/svg%3E");
}

.compare__item--dislike:before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.602888 9.63125C0.602888 10.6027 1.39006 11.3899 2.36122 11.3899H4.85365C4.13371 13.1912 4.08118 14.6681 4.08581 15.1412C4.08635 15.1931 4.07465 15.3774 4.07465 15.4182V15.5002C4.12691 17.2109 4.6506 17.7346 5.32318 17.9839C6.0129 17.9839 6.57198 17.4251 6.57198 16.7354V16.6104C6.57878 16.1828 7.1795 15.3007 7.1795 15.3007L11.7615 10.6658L11.8388 10.5708L13.2324 6.84404L11.8388 1.06548C11.8388 0.890192 11.6967 0.748383 11.5217 0.748383H2.89526C2.30842 0.748383 1.8095 1.17626 1.72077 1.75657C1.38162 3.9749 0.602888 9.12253 0.602888 9.63125Z' fill='%23F27362'/%3E%3Cpath d='M12.8339 0.0437565H15.9736C16.5232 0.0437565 16.9688 0.489328 16.9688 1.03915V10.4656C16.9688 11.0154 16.5232 11.4607 15.9736 11.4607H12.8339C12.2844 11.4607 11.8388 11.0154 11.8388 10.4656V1.03915C11.8388 0.489328 12.2844 0.0437565 12.8339 0.0437565Z' fill='%23EB4129'/%3E%3Cpath d='M12.8339 1.91879L15.9736 1.91879C16.5232 1.91879 16.9688 2.36437 16.9688 2.91418V1.03908C16.9688 0.489265 16.5232 0.0436943 15.9736 0.0436943L12.8339 0.0436943C12.2844 0.0436943 11.8388 0.489265 11.8388 1.03908V2.91418C11.8388 2.36437 12.2844 1.91879 12.8339 1.91879Z' fill='%23D52A12'/%3E%3Cpath d='M2.36129 11.3898H2.68383C2.70016 11.2352 2.72493 11.0327 2.75596 10.7926C3.34661 6.22555 7.23454 2.80579 11.8389 2.80579V1.06569C11.8389 0.890405 11.6968 0.748322 11.5218 0.748322L2.89532 0.748322C2.30848 0.748322 1.80956 1.17647 1.72083 1.75651C1.38168 3.97483 0.602954 9.12245 0.602954 9.63144C0.602954 10.6026 1.39012 11.3898 2.36129 11.3898Z' fill='%23EA6857'/%3E%3C/svg%3E");
}

.compare__footer {
    margin: 0 -10px -20px;
    padding: 20px 10px;
    background-color: #f1f1f1;
    border-radius: 0 0 10px 10px;
}

.compare--empty .compare__footer {
    margin: -20px -10px -20px;
    border-radius: 10px;
}

.compare__info {
    display: flex;
    align-items: center;
}

.compare__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.compare__logo-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.compare__name {
    margin-bottom: 5px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
}

.compare__rating {
    display: flex;
    align-items: center;
}

.compare__rating-stars {
    display: flex;
    align-items: center;
    margin: 0 -1px;
}

.compare__rating-star {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 1px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg fill='%230072DB' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9199 6.43999L12.1499 10.115L13.0399 15.3025C13.0574 15.4025 13.0174 15.5 12.9349 15.56C12.8524 15.62 12.7474 15.6275 12.6574 15.58L8.10493 13.1875L3.33243 15.6025C3.24243 15.6475 3.13993 15.64 3.05743 15.58C2.97493 15.52 2.93743 15.4225 2.95493 15.3225L3.84743 10.115L0.0799293 6.43999C0.00742928 6.36749 -0.0175707 6.26749 0.0124293 6.16999C0.0449293 6.07249 0.122429 6.00499 0.224929 5.98999L5.43243 5.23249L7.76243 0.51249C7.80743 0.41999 7.89493 0.36499 7.99743 0.36499C8.09993 0.36499 8.18743 0.41999 8.23243 0.51249L10.5624 5.23249L15.7699 5.98999C15.8724 6.00499 15.9499 6.07249 15.9824 6.16999C16.0174 6.26749 15.9924 6.36999 15.9199 6.43999Z'/%3E%3C/svg%3E");
}

.compare__rating-star--half {
    background-image: url("data:image/svg+xml,%3Csvg fill='%230072DB' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23star-half-clip)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.99807 0.36499C8.1003 0.365211 8.18754 0.420176 8.23245 0.51249L10.5624 5.23249L15.7699 5.98999C15.8724 6.00499 15.9499 6.07249 15.9824 6.16999C16.0174 6.26749 15.9924 6.36999 15.9199 6.43999L12.1499 10.115L13.0399 15.3025C13.0574 15.4025 13.0174 15.5 12.9349 15.56C12.8524 15.62 12.7474 15.6275 12.6574 15.58L8.10495 13.1875L3.33245 15.6025C3.24245 15.6475 3.13995 15.64 3.05745 15.58C2.97495 15.52 2.93745 15.4225 2.95495 15.3225L2.95628 15.3147C2.9568 15.3106 2.95742 15.3066 2.95814 15.3025L3.84745 10.115L0.0781377 6.43998C0.0264269 6.39005 -0.00111908 6.32359 3.48329e-05 6.2542C-0.000277096 6.2264 0.00380059 6.19809 0.0124475 6.16999C0.0449475 6.07249 0.122447 6.00499 0.224947 5.98999L5.43245 5.23249L7.76245 0.51249C7.80745 0.41999 7.89557 0.36499 7.99807 0.36499ZM7.99807 12.1208L8.11362 12.0624L11.802 14.0007L11.0754 9.76591L14.1535 6.76539L9.8984 6.14642L7.99807 2.29682V12.1208Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='star-half-clip'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.compare__rating-star--empty {
    background-image: url("data:image/svg+xml,%3Csvg fill='%230072DB' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5624 5.23249L8.23243 0.51249C8.18743 0.41999 8.09993 0.36499 7.99743 0.36499C7.89493 0.36499 7.80743 0.41999 7.76243 0.51249L5.43243 5.23249L0.224929 5.98999C0.122429 6.00499 0.0449293 6.07249 0.0124293 6.16999C-0.0175707 6.26749 0.00742928 6.36749 0.0799293 6.43999L3.84743 10.115L2.95493 15.3225C2.93743 15.4225 2.97493 15.52 3.05743 15.58C3.13993 15.64 3.24243 15.6475 3.33243 15.6025L8.10493 13.1875L12.6574 15.58C12.7474 15.6275 12.8524 15.62 12.9349 15.56C13.0174 15.5 13.0574 15.4025 13.0399 15.3025L12.1499 10.115L15.9199 6.43999C15.9924 6.36999 16.0174 6.26749 15.9824 6.16999C15.9499 6.07249 15.8724 6.00499 15.7699 5.98999L10.5624 5.23249ZM14.1535 6.76539L9.89838 6.14642L7.99743 2.29557L6.09648 6.14642L1.84508 6.76484L4.92182 9.76604L4.18778 14.0489L8.1136 12.0624L11.802 14.0007L11.0754 9.76591L14.1535 6.76539Z'/%3E%3C/svg%3E");
}

.compare__rating-text {
    margin-left: 10px;
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
}

.compare__buttons {
    margin-top: 10px;
}

.compare__button {
    width: 100%;
    height: 40px;
    font-size: 20px;
    line-height: 24px;
}

/*** Responsive ***/

@media (min-width: 768px) {

    .compare__cols {
        flex-direction: row;
        margin: 0 -15px;
    }

    .compare__col {
        margin-bottom: 30px;
        padding: 0 15px;
        width: 50%;
    }

    .compare__col:not(:last-child) {
        padding-bottom: 0;
        border-bottom: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }

    .compare__footer {
        display: flex;
        align-items: center;
        padding: 15px 10px;
    }

    .compare__info,
    .compare__buttons {
        width: 50%;
        margin: 0;
        padding: 0 5px;
    }

}

@media (min-width: 1024px) {

    .compare__title {
        font-size: 22px;
        line-height: 32px;
    }
}

@media (min-width: 1280px) {

    .compare__logo {
        margin-right: 24px;
    }

    .compare__name {
        font-size: 24px;
        line-height: 28px;
    }

    .compare__buttons {
        display: flex;
        justify-content: flex-end;
    }

    .compare__button {
        width: 230px;
        height: 60px;
    }
}