.icon::before {
    content: "";
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    display: block;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    flex-shrink: 0;
    transition: 0.3s ease-out;
}

.icon:hover::before {
    background-color: var(--cta-bg-color);
}

.icon-search::before {
    mask-image: url("../svg/icons/search.svg");
}
.icon-menu::before {
    mask-image: url("../svg/icons/menu.svg");
}
.icon-heart::before {
    mask-image: url("../svg/icons/heart.svg");
}
.icon-pin::before {
    mask-image: url("../svg/icons/map-pin.svg");
}
.icon-calendar-days::before {
    mask-image: url("../svg/icons/calendar-days.svg");
}
.icon-right-arrow::before {
    mask-image: url("../svg/icons/arrow-right.svg");
}
.icon-users::before {
    mask-image: url("../svg/icons/users.svg");
}
.icon-close::before {
    mask-image: url("../svg/icons/x.svg");
}
.my-rental-logo::before {
    content: "";
    position: absolute;
    display: block;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    flex-shrink: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s ease-out;
    mask-image: url("../svg/my-rental-logo.svg");
}