Responsive profile card component

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

The goal to use semantic HTML5 markup, CSS3 and a minimal toolset to implement the solution was met.

In terms of development methodology, the following steps were followed:

1. Start with the HTML markup for the content and provide context through semantic HTML.
2. Implement the form and function that is supported by CSS.
3. Implement application logic with JavaScript. In this instance no JS was required.

I am particularly pleased with the implementation of the design being as close to the intended design as possible.

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

A major challenge is to balance responsive design with a faithful representation of the graphic design because the design is static and looks great on a single resolution, it's very simple to implement a pixel perfect design just for a specific resolution but as more resolutions are required to be supported the complexity of sizing and positioning elements increases.

Positioning the background images was a tedious trial and error process. I managed to get this implemented using the following CSS:

body {
  overflow: hidden;
  height: 100dvh;
  width: 100dvw;
  display: grid;
  place-content: center;
  background-color: var(--color-main-bg);
  font-family: var(--font-family);
  background-image: url("images/bg-pattern-top.svg"),
    url("images/bg-pattern-bottom.svg");
  background-position: right 43vw bottom 61vh, left 44vw top 53vh;
  background-size: 622px, 622px;
  background-repeat: no-repeat, no-repeat;
}

@media (min-width: 400px) {
  body {
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    background-size: 978px, 978px;
    background-repeat: no-repeat, no-repeat;
  }
}

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

I would appreciate any feedback that will help me improve the following:

• Using the cascade aspect of CSS mindfully.
• The use of BEM
• Mobile(/content) first implementation
• Fluid layout
• Clean code

Thanks!