@MaxTarasevich
Posted
Hi Rian!
Good job!
Pay attention to the following points:
In order to center the .card block, you made the body flex container as well as the .container block. I think this is a bit redundant, try to remove the flex properties from these blocks, as well as the properties
max-width: 30%; height: auto;
height: auto; is the default property and max-width: 30%; will greatly compress your card at low screen resolutions, and vice versa at high resolutions - greatly stretch it.
It is enough to set the width for the .card block and give it a property margin: auto; the block will be centered. Or, instead of margin, return the flex properties to the body tag.
For block .overlay properties
width: 100%
height: 98.5%;
superfluous, just set
top: 0;
left: 0;
bottom: 0;
right: 0;
or in the shorthand
inset: 0;
and the block will take the entire width and height. In order for the image to match the parent block, add the property display: block;
I hope my feedback will be useful to you!
