.icon {
    --icon-size: 1.8rem
}

.icon:before {
    content: "";
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    background-color: var(--color-white);
    -webkit-mask: var(--icon-url) center/contain no-repeat;
    mask: var(--icon-url) center/contain no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--duration-fast);
}

@media (hover: hover) {
    .icon:is(a):hover:before {
        background-color: var(--color-secondary)
    }
}

.icon:is(a) {
    --icon-min-size: 24px;
    display: flex;
    width: max(var(--icon-size), var(--icon-min-size));
    height: max(var(--icon-size), var(--icon-min-size));
    margin: calc(min(0px, var(--icon-size) - var(--icon-min-size))/2);
    transition: color var(--duration-fast)
}

.icon:is(a):before {
    margin: auto
}

@media (orientation: portrait) {
    .review--badge img{
        width: 100px;
    }
}

.icon.tile__icon::before{
    background-color: var(--color-gray-95);
}