Accordion Card

You did an amazing job!! I can give you some tips, and solutions for "figuring out the position and height of the container when the accordion is opened up".

• First your body, I think has too much height:

body {
    height: 170vh;
   /* rest of the styles */
}
/* Use the css calc function */
body {
    /* 
    After do some testing 200px won't make the accordion 
    to cause overflow when it is fully open.
    */
    height: calc(100vh + 200px);
    /* rest of the styles */
}

• In addition to that, use the align-items property and give it the value start, this will position your component to the top of the page.

body {
    height: 170vh;
    display: flex;
    align-items: start;
    justify-content: center;
}

• Theres no need to give your container all that margin, a margin auto will make a better fit:

.container {
   /* All the styles */
    margin: auto;
}

Just one more thing. Try to use less px as measure unit, and lear about relative units like em, and rem.

Overall I think you did a great job. Your code is easy to read, semantic, and accesible. You develop the solution mobile first, for I could see in your code, that's a really good practice. Your solution and the original design are identical. Congrats!!