All solutions

Is the correct way to center the component both horizontally and vertically as the contents are overflowing the viewport height? I set the top: 0; applied equal padding on both top and bottom and set translate(-50%, 0).

    position: absolute;
    top: 0;
    left:50%;
    transform: translate(-50%, 0%);
    padding: 2rem 0;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    'sedans'
    'suvs'
    'luxury';
}```

• Am I applying the BEM naming convention correctly?
• Thoughts on me using grid-template-areas on the subscription section of the card?

• Was using custom radio buttons the correct approach for creating the interactive rating feature? If there are more efficient ways, what are they?

• The BEM naming convention is completely new to me, am I applying it correctly?

• Is there a more efficient way to replace the content in the rating card once the score has been submitted?

    const scores = document.getElementsByName('rating')
    const thankYouStatement = document.getElementById('#thank-you-statement')
    
 scores.forEach(score => {
        if (score.checked) {
            document.querySelector('.component__content').innerHTML = thankYouStatement
            const message = `You selected ${score.value} out of 5`
            document.querySelector('.thank-you-message').innerHTML = message
            document.getElementById('thank-you-statement').style.display = 'initial'
            
        }
    })
}