Mobile-first flexbox react solution

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

After I've centered the parent container using Grid's place-content: center, I noticed the broken vertical scroll behavior on low-height viewports - content was spilling beyond viewport without possibility to scroll. The fixed min-height feels too hacky. Is there a better way?

const Main = styled.main`
...
  min-height: 780px;
  @media ${QUERIES.laptopAndUp} {
    min-height: 446px;
  }`

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

I couldn't precisely reproduce the violet tint on the image, so what color blend recipe was used in the design files?

With only two given breakpoints (mobile and desktop) - what would be the proper strategy for viewports in between, like tablets?