Frontend Mentor | 3-Column Preview Card Component Solution

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

I'm mostly proud of finishing the whole entire design and also incorporating the mobile perspective as well. For next time, I would want to do this solution using the grid layout.

.all-content {
    width: 100%;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.container {
    width: 300px;
    height: 500px;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    padding: 40px;
}

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

Challenges that I encountered was fitting all of the containers in a column structure, while still showing all of the contents. I realized that for the @media query, I had to put the height on auto so everything shows and there is space between everything.

@media only screen and (max-width: 600px) {
    .all-content {
        margin: 40px 0 40px 0;
        flex-direction: column;
        height: auto;
    }

    .container {
        border-radius: 0 !important;
        height: 400px !important;
    }

    .container p {
        line-height: 1.5rem;
    }
}

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

Finding a more optimal way to do this. If there is anything that I could've done to make my code shorter, i'd appreciate the help.