HTML/CSS风格化信息卡片排版异常，求调试帮助

我正尝试使用HTML/CSS制作4个不同位置的风格化信息卡片，目前仅完成前2个，但排版不符合预期，另外2个尚未制作。

参考图与当前效果 #

• Figma设计图：
  
• 当前实现效果：
  

现有HTML代码 #

<div class="v10_8">
  <div class="v10_9"></div>
  <div class="v10_15">
    <div class="v10_14"><span class="v10_10">CAREY</span><span class="v10_11">1</span></div>
    <span class="v10_12">On 56 Points</span>
  </div>
</div>
<div class="v10_16">
  <div class="v10_17"></div>
  <div class="v10_18">
    <div class="v10_19"><span class="v10_20">STANWAY</span><span class="v10_21">2</span></div>
    <div class="v10_40"><span class="v10_22">On 40 Points</span><span class="v10_39">16 points behind Carey</span></div>
  </div>
</div>

现有CSS代码 #

/* 父容器样式 */
.container {
  width: 262px;
  height: 617px;
  background: url("../images/v10_23.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 65px;
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v10_8 {
  width: 262px;
  height: 276px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 44px;
  box-shadow: -10.75px 9.85px 60px rgba(0, 0, 0, 0.09);
  overflow: hidden;
}
.v10_9 {
  width: 267px;
  height: 96px;
  background: rgba(248,228,125,1);
  opacity: 1;
  position: absolute;
  top: 180px;
  left: 0px;
  overflow: hidden;
}
.v10_15 {
  width: 135px;
  height: 210px;
  background: url("../images/v10_15.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 44px;
  opacity: 1;
  position: absolute;
  top: 29px;
  left: 65px;
  overflow: hidden;
}
.v10_14 {
  width: 94px;
  height: 138px;
  background: url("../images/v10_14.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 17px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 21px;
  overflow: hidden;
}
.v10_10 {
  width: 94px;
  color: rgba(21,21,21,1);
  position: relative;
  top: 0px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 29px;
  opacity: 1;
  text-align: left;
}
.v10_11 {
  width: 30px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 52px;
  left: 32px;
  font-family: Folito;
  font-weight: Bold;
  font-size: 71px;
  opacity: 1;
  text-align: left;
}
.v10_12 {
  width: 135px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 183px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 22px;
  opacity: 1;
  text-align: left;
}
.v10_16 {
  width: 262px;
  height: 276px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 341px;
  left: 1px;
  border-radius: 44px;
  box-shadow: -10.75px 9.85px 60px rgba(0, 0, 0, 0.09);
  overflow: hidden;
}
.v10_17 {
  width: 267px;
  height: 96px;
  background: rgba(119,221,119,1);
  opacity: 1;
  position: absolute;
  top: 180px;
  left: 0px;
  overflow: hidden;
}
.v10_18 {
  width: 167px;
  height: 241px;
  background: url("../images/v10_18.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 44px;
  opacity: 1;
  position: absolute;
  top: 16px;
  left: 50px;
  overflow: hidden;
}
.v10_19 {
  width: 135px;
  height: 138px;
  background: url("../images/v10_19.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 17px;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 16px;
  overflow: hidden;
}
.v10_20 {
  width: 135px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 29px;
  opacity: 1;
  text-align: left;
}
.v10_21 {
  width: 42px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 52px;
  left: 46px;
  font-family: Folito;
  font-weight: Bold;
  font-size: 71px;
  opacity: 1;
  text-align: left;
}
.v10_40 {
  width: 167px;
  height: 57px;
  background: url("../images/v10_40.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 11px;
  opacity: 1;
  position: absolute;
  top: 183px;
  left: 0px;
  overflow: hidden;
}
.v10_22 {
  width: 137px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 0px;
  left: 15px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 22px;
  opacity: 1;
  text-align: left;
}
.v10_39 {
  width: 167px;
  color: rgba(21,21,21,1);
  position: absolute;
  top: 38px;
  left: 0px;
  font-family: Folito;
  font-weight: Medium;
  font-size: 16px;
  opacity: 1;
  text-align: left;
}

我知道这个设计实现难度不低，但还是想完成，希望能得到帮助，谢谢。

内容的提问来源于stack exchange，提问作者Pavi Singh