All solutions

If you believe the code could have been done in a better/more efficient way, please let me know! All feedback is very welcome and appreciated.

This time I went for a mobile-first approach, building the desktop and tablet visualization through Media Queries. I also tried to implement BEM into my workflow, which made it easier for me to go back and forth between classes.

For the desktop and tablet visualization I used min-width: 1400px and min-width: 768px (each in their respective media query), both in which I used display: grid with a grid-template-columns: 45% 55%; and grid-template-columns: 50% 50%;.

-Could it have been easier to achieve this using flexbox?

To align the items slightly to the right/below the next I played with margin values using utility classes such as (for the ratings):

.margin-left-5 {
        margin-left: 5rem;
    }
.margin-right-5 {
        margin-right: 5rem;
    }

and (for the review cards):

.margin-4 {
        margin-top: 4rem;
        margin-bottom: -2rem;
    }

-What is a better more efficient way to achieve this same result?

-Also, it would be really helpful if you could please tell me how I can improve!

Regards!

Was this an efficient way to develop the desired design?

Was there an easier way to achieve this?

For the QR-Container, I used a display:flex; with a flex-direction:column; so that I could align-items:center; and justify-content: center;: Could it have been easier to instead use display: block;?