Vanilla HTML/CSS - Grid used for links and transition for hover/focus

What are you most proud of, and what would you do differently next time?

I am proud of the grid layout for the links with this project. I know the easiest option was to utilize an unordered list but I just wanted to experiment a bit and try a different solution.

I am also pleased that I figured out how to use focus and hover states and utilize a transition to ease into the animations.

What challenges did you encounter, and how did you overcome them?

I think the biggest challenge is trying to find the exact margins and spacing for the elements. I did a decent amount of research on padding, margin, etc but I don't fully comprehend how height and width apply to elements within HTML/CSS.

The solution I found was to minorly tweak numbers and compare between the example and my attempt at the project, which I dont find to be particularly reliable.

What specific areas of your project would you like help with?

I would love to have a more in-depth explanation of width and height with HTML/CSS. I understand the fundamentals and I have spent extensive time watching youtubers like Kevin Powell, but I dont quite grasp it.

I would also feel like I am missing a key bit of information that would help me acquire the measurements needed to re-create the initial project.