Preview Card Component using flex-box

Instead of <article> , use <main> and you won't have accessibility issues anymore :)

Your overflow:hiiden isn't working because you added the image using an ::after pseudo-class.

Wrap your card in a Main tag and it will clear the accessibility warnings.

Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

Hope this helps.

Hi @arnameti, Congrats on completing your first challenge. You have done a great job implementing the design.

As far as BEM methodology is concerned, there are certain things to improve upon. You have to be careful in understanding when to use element and when and how to use modifiers.

1. BEM Element: Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
2. BEM Modifier: Flags on blocks or elements. Use them to change appearance, behavior or state.

So, in your case the naming - card__days--left is okay as it is changing some property of the original element but card__days--img is not a correct name for a BEM modifier. Here you are not changing any characteristics of the element - card__days.

Also, keep in mind that a BEM modifier cannot be used alone. It is like an adjective used to enhance the character of a noun. So, it will always be used with a BEM Element (noun) first followed by its BEM modifier (adjective). For example: This is the correct usage -

<div class="block block--mod">...</div>
	<div class="block block--size-big
		block--shadow-yes">...</div>

While, this is wrong -

<div class="block--mod">...</div>

Also, ideally a BEM modifiers should not be used for positioning elements. If you have to position an element, you should use BEM mixing.

You could read more about it - here

Thank you!!