Updating styles to new version.

HI,

I've switched to the new version of this and it does work, but I'm having difficulty styling the clusters whereas I managed easily with the old version.

In the old version I had it set up like:

```
let markerCluster = new MarkerClusterer({map, markers}, {
maxZoom: 14,
clusterClass: 'custom-clustericon',
styles: [
{
width: 30,
height: 30,
className: 'custom-clustericon-1'
},
{
width: 40,
height: 40,
className: 'custom-clustericon-2'
},
{
width: 50,
height: 50,
className: 'custom-clustericon-3'
}
]
});
```

and styled as so:

```
.custom-clustericon {
background: var(--cluster-color);
color: #fff;
border-radius: 100%;
font-weight: bold;
font-size: 15px;
display: flex;
align-items: center;
}

.custom-clustericon:before,
.custom-clustericon:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background: var(--cluster-color);
border-radius: 100%;
}

.custom-clustericon:before {
width: calc(100% + 10px);
height: calc(100% + 10px);
opacity: 0.6;
}

.custom-clustericon:after {
width: calc(100% + 20px);
height: calc(100% + 20px);
opacity: 0.3;
}

// The bigger the number, the more markers/groups are contained within.
.custom-clustericon-1 {
--cluster-color: hsl(var(--color-highlight));
}

.custom-clustericon-2 {
--cluster-color: hsl(var(--color-secondary));
}

.custom-clustericon-3 {
--cluster-color: hsl(var(--color-primary));
}
```

How can I replicate the older styles using the new version? I;ve tried to inspect the new cluster markers, but all I see is a div with a single transparent pixel image within. Nothing to actually help me style. I just want to replicate the styles I have above. Custom cluster icon colours and three cluster sizes. I'm not sure what those sizes were specifically as I just used the ones that came as default with the old version.

Thanks,
Neil