.article-item {
    $this: &;

    display: flex;
    flex-direction: column;
    gap: 23px;
    position: relative;

    @include breakpoint(md) {
        flex-direction: row;
    }

    &__image {
        flex-shrink: 0;

        @include breakpoint(md) {
            max-width: 340px;
        }

        img {
            @include size(100%);
            @include object-fit;
        }
    }

    &__content {
        @include breakpoint(md) {
            width: 1%;
            flex-grow: 1;
            padding: 25px 0;
        }
    }

    &__heading {
        margin-bottom: 20px;
    }

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

        color: var(--rocket-color-primary-200);
    }

    &__title-link {
        text-decoration: none;

        @include event {
            text-decoration: underline;
        }

        &::after {
            @include cover;
        }
    }

    &__text {
        font-size: 20px;
        line-height: 1.25;
        color: var(--rocket-color-black-base);
    }

    &--focus {
        flex-direction: column;

        @include breakpoint(md) {
            flex-direction: column;
        }

        #{$this} {
            &__image {
                max-width: 100%;
            }

            &__content {
                padding: 0;
                width: 100%;
            }
        }
    }
}