Single card grid with flex

👑Hello Queen, congratulations for your new solution!

Here's some tips to improve your solution:

To make all three sections with the cards responsive you need to place max-width: 100% to make the cards grow the maximum of the width of the container and also resize when it scales. Its also better that you replace the div for these cards with article to improve the semantics.

Give the cards mobile version vertical alignment with flex and min-height: 100vh.

}
body {
    min-height: 100vh;
    background-color: var(--Light-Gray);
    height: 100%;
    font-family: "Karla", sans-serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

👋 I hope this helps you and happy coding!