Responsive Checkout Card Component

• In this project, I struggled to keep my css styles organized and I struggled to keep my class names intuitive. Would anyone have any suggestions on how to remedy these issues?
• I would like to know how I can change my HTML to be more semantic. Ive always wanted to venture into that, but was always unsure of what containers should be semantic. Any help with that would be greatly appreciated.
• What concerned me the most in this project was how i handled the price plan component. I used a flex container and spaced them as two flex items by wrapping the icon and plan price in a span. Is there a better way of doing this?
• The final thing I was worried about was about how I selected certain elements. For some things I used very specific element selectors, and I was wondering if that is bad. Would it be better to give those individual elements a class and select it that way? Heres an example of what I did.

.sub-card__plan span p:nth-of-type(2){
    font-weight: 500;
    color: var(--color-desaturatedBlue);
}