Nestled Grandchild Boxes Not Responding Or Moving In Flexbox - html

Question

The fourth block's red cards (the block on middle right of the image) will not respond to look like this image in figma.
They currently look like this on my live server from VScode.
Here is my HTML.
Below is my latest effort in CSS.
I have been trying to fix this since last Wednesday.
I'm completely new to this field and this is my first class (front end web dev).
What am I fundamentally misunderstanding here?
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 1152px;
margin: auto;
background-color: #370617;
}
.container {
background-color: #F48C06;
border: none;
border-radius: 8px;
width: 468px;
height: 160px;
position: relative;
margin: 20px;
display: flex;
}
.card {
background-color:#9D0208;
border: none;
border-radius: 4px;
width: 78px;
height: 78px;
margin: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.first-block {
display: flex;
justify-content: flex-start;
align-items: flex-end;
width: 468px;
height: 160px;
margin: 20px
}
.second-block {
display: flex;
justify-content: center;
align-items: center;
width: 468px;
height: 160px;
margin: 20px;
}
.sb-cardone {
height: 120px;
}
.sb-cardtwo {
height: 120px;
}
.sb-cardthree {
height: 120px;
}
.third-block{
display: flex;
justify-content: flex-end;
align-items: center;
}
.fourth-block {
display: flex;
width: 468px;
height: 160px;
}
.fb-cardone {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20px;
margin-left: 20px;
}
.fb-cardtwo {
display: flex;
justify-content: center;
align-self: center;
}
.fb-cardthree {
display: flex;
justify-content: flex-end;
align-self: flex-end;
}
body {
background-color: #370617;;
margin: 0;
min-height: 100vh;
}