Fylo Data Storage Component

This is my 7th challenge and I'm noticing that my interpretation of the sizing is getting better. It takes less time to try and get the correct sizes e.g. border-radius.

The progress bar was a lot of fun. Especially the dot inside. Since I did not exactly know the height of the dot I came up with a solution which uses the aspect-ratio of 1 / 1 to keep the height and width the same.

.dot {
  background-color: var(--pale-blue);
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
}