Не отображается ::after

Нужно затемнить картинку, но ::after не отображается.

.menu__cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 55px;
    padding: 0 50px;
}
.menu_card{
    position: relative;
}
.menu__card::after{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(21, 24, 36, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.menu__card-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.menu__card-size-lg{
    grid-column: span 1;
    margin-bottom: 112px;
}

<div class="menu__cards">
            <figure class="menu_card menu__card-size-lg">
                <img src="{% static 'img/jpg/art.jpg' %}" alt="Арты по аниме" class="menu__card-img">
                <figcaption class="menu__card-title">
                    Арты
                </figcaption>
            </figure>
            <figure class="menu_card menu__card-size-lg">
                <img src="{% static 'img/jpg/screenshot.jpg' %}" alt="Скриншоты из аниме" class="menu__card-img">
                <figcaption class="menu__card-title">
                    Скриншоты
                </figcaption>
            </figure>
            <figure class="menu_card menu__card-size-lg">
                <img src="{% static 'img/jpg/manga.jpg' %}" alt="Манги" class="menu__card-img">
                <figcaption class="menu__card-title">   
                    Манга
                </figcaption>
            </figure>

Вернуться на верх