Почему картинка выпирает с карточки?

Question

[luxurypluxury]

У меня есть карточка в которой есть картинка, и снизу на эту картинку абсолютом налаживается блок с информацией, но почему-то он ложится не на всю длину карточки. Кстати без бордер радиуса у карточки все хорошо.


Вот код карточки:

<Link to=''>
            <article className={styles.card}>
                <img src={imageUrl} alt={title} />
                {favorite &&
                    <button className={styles.card__favorite} onClick={() => setIsFavorite(!isFavorite)}>
                        <HeartIcon className={isFavorite ? styles.favorited : ''} />
                    </button>
                }
                {rating &&
                    <div className={styles.card__rating}>
                        <RatingBlock rating={rating} />
                    </div>
                }
                {(title && genre) &&
                    <div className={styles.card__info}>
                        {status &&
                            <div className={`${styles.card__info__status} ${getStatus(status)}`}>
                                <p>{status}</p>
                            </div>}
                        <div className={styles.card__info__content}>
                            <h3>{title}</h3>
                            <p>{genre}</p>
                        </div>
                    </div>
                }
            </article>
        </Link>

Вот стили:

.card {
    width: 100%;
    box-shadow: $shadow;
    overflow: hidden;
    height: 350px;
    position: relative;
    border-radius: 8px;

    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    &__rating {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    &__favorite {
        background: $opacity-bg;
        backdrop-filter: blur(5px);
        border-radius: 5px;
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;

        svg {
            path {
                stroke: $primary;
            }
        }

        .favorited {
            path {
                fill: $primary;
            }
        }

    }

    &__info {
        background-color: $opacity-bg;
        backdrop-filter: blur(2.5px);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;

        &__content {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;

            h3 {
                font-weight: 500;
                font-size: 16px;
                line-height: 135%;
                color: $primary;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            p {
                font-size: 14px;
                line-height: 135%;
                color: $secondary;
            }
        }

        &__status {
            text-align: center;

            p {
                font-size: 16px;
                line-height: 135%;
                color: $white;
            }

            &__viewed {
                padding: 3px 20px;
                background-color: $viewed;
            }

            &__watching {
                padding: 3px 20px;
                background-color: $watching;
            }

            &__thrown {
                padding: 3px 20px;
                background-color: $thrown;
            }

            &__willWatch {
                padding: 3px 20px;
                background-color: $will-watch;
            }
        }
    }
}