.news-item {
    --news-item-img-scale: 1;

    display: flex;
    flex-direction: column;
    row-gap: 34px;
    position: relative;

    &:hover,
    &:focus-within {
        --news-item-img-scale: 1.1;
    }

    &__image {
        width: 100%;
        overflow: hidden;

        img {
            @include transition(transform);

            transform: scale(var(--news-item-img-scale));
            width: 100%;
        }
    }

    &__content {
        text-align: center;

        @include breakpoint(md) {
            text-align: left;
        }
    }

    &__title {
        @extend %base-styles-text-lg;

        font-weight: 700;
        color: var(--rocket-color-secondary-100);
    }

    &__link {
        color: inherit;
        text-decoration: none;

        @include event {
            text-decoration: underline;
        }

        &::after {
            @include cover;
        }
    }

    &__description {
        @extend %base-styles-text;
    }
}