Responsive Card

Hi,

For your first challenge, your code is "Oh my god!!!" I really like it. However, I have a few small remarks:

1. You have two breakpoints (@media screen and (min-width: 768px)), but in reality, they are the same. You can keep just one. If you want to follow the mobile-first approach, you can move all this:

   @media screen and (min-width: 768px) {
     .card-container {
       flex-direction: row;
     }
     .card-container .container.image-sec {
       width: 50%;
       height: auto;
     }
     .card-container .container.content-sec {
       width: 50%;
     }
   }
   

   to your first code, each in its appropriate place (selector), and keep only the code for adjustments for desktop design:

   @media screen and (max-width: 767px) {
     /* Your desktop-specific styles here */
   }
   

2. You should use variables for colors, sizes, and more like this:

   :root {
     --white: hsl(0, 0%, 100%);
     --small-size: 14px;
     /* More variables here */
   }
   

   Then use the variables instead of fixed values. It is cleaner, and you can change them in one place.

3-For units, use em or rem instead of fixed px for responsiveness.

I hope this is helpful. Enjoy coding, and see you at the next challenge!

yes the solution includes semantic HTML