Improve cards for mobile users

[savicaleksa]

Changed the way cards look until sm breakpoint for mobile users.

Card with exact date of next cycle:

Card with estimated date of next cycle:

Wrapping of the the date and countdown if they're too long (this could be changed by, for example, flex wrapping the chip and date or flex wrapping the countdown under those two, but it wouldn't look like the other cards so I think it should just be left like this):

Layout remains the same as before after sm. The gap between the green chip and the date may be shorter than the one in the second picture of #51 , but it's the same as the gap between the gray chip and progress bar (which is the same as in the picture).

Let me know if I should change something else.

[savicaleksa]

Branch name isn't in the format specified in CONTRIBUTING.md because I was behind the commit in which the file was added. Sorry about that.

[AyronK]

Visually it looks almost perfect! There are some minor things that I would correct in this PR.

1. When there is a long title, align the date to the bottom, rather than center

2. On smaller viewports the timer wraps, which looks weird. I created a workaround for this in #62, so you can just merge my changes to your fork.

Other that that I can see that some long labels cause problems in smaller resolutions but I can take care of that later, it's nothing urgent. Thanks for contributing :)

[savicaleksa]

Got it, I'll post screenshots when I make the changes, but that will be a bit later since I'm away from home at the moment.

[savicaleksa]

I've fixed the alignment here: Had to change line-height of the date because it didn't look aligned. Line height is back to normal at sm.

And the timer looks okay now:

[AyronK]

Looks great, thank you for you work :)