Mobile First Design for Results Summary Component

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

I like the media query that I used to change how the webpage looks on larger screen sizes.

@media screen and (min-width: 426px)  {

    main {
        min-height: 100vh; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    
    .results {
        display: flex; 
        flex-direction: row; 
        justify-content: center; 
        background-color: white; 
        border-radius: 20px; 
        box-shadow: 5px 5px 5px #ccc; 
    }

    :is(.results__card, .results__scores) {
        max-width: 35ch; 
        width: 50%;  
        border-radius: 20px; 
    }

}

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

Initially, I started off the challenge with a Desktop-First Approach then try to work my way down to smaller screen sizes. However, I found that there were a lot more problems that I anticipated - particularly, with making sure that the components still look good without overflowing out of it's container. I found that switching to the Mobile-First approach then sizing up for bigger screen sizes became much more useful and helped me solve the problem.