NFT preview card component challenge on Frontend Mentor Using Html, Cs

I got some questions when doing the challenge:

1. Is it a good way to use <main> as the background element? My purpose is to apply CCS flex so as to center the card.

2. Flex gap

Does flex-gap exist? I found the property on the web but nothing happen when I applied it to my code and finally, I have to use margin.

1. how to vertically center svg?

when I added svg (the eth icon and clock icon) to my codes, I found it is at the top-left of the box. I used flex align-items to center them. But is there another way to verically center svg?

1. overlay color on image, is it possible(no need to add a div)?

to apply the hover effect of the main image, I added a div with overlay color. But is there any way that I no need to add a div but just do some css rules to the image?

1. why can't the image fully fill the box?

There is a 1px gap at the bottom and I have to set the height to 99% to fix it.

1. Is it a good way to use <main> as the background element? My purpose is to apply CCS flex so as to center the card.

2. Flex gap

Does flex-gap exist? I found the property on the web but nothing happen when I applied it to my code and finally, I have to use margin.

1. how to vertically center svg?

when I added svg (the eth icon and clock icon) to my codes, I found it is at the top-left of the box. I used flex align-items to center them. But is there another way to verically center svg?

1. overlay color on image, is it possible(no need to add a div)?

to apply the hover effect of the main image, I added a div with overlay color. But is there any way that I no need to add a div but just do some css rules to the image?

1. why can't the image fully fill the box?

There is a 1px gap at the bottom and I have to set the height to 99% to fix it.