.marker-cluster div {
    --icon-size: 40px;
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
    background-color: RGBA(var(--cluster-color, 0 , 0, 0), .8);
}

.leaflet-marker-icon.custom-icon {
    font-size: 36px;
    text-align: center;
}
.marker-cluster div > span {
    --ratio: 1.2;
    border-radius: 15px;
    display: block;
    line-height: calc(var(--icon-size) / var(--ratio));
    font-size: 14px;
    width: calc(var(--icon-size) / var(--ratio));
    height: calc(var(--icon-size) / var(--ratio));
    background: RGBA(255, 255, 255, .4);
    font-weight: bold;
    transform: translate(
        calc(var(--icon-size) / 2 - var(--icon-size) / 2 / var(--ratio)),
        calc(var(--icon-size) / 2 - var(--icon-size) / 2 / var(--ratio))
    );
}