.our-offers-item {
    display: flex;
    flex-direction: column;
    position: relative;
    row-gap: 34px;

    &__image-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        margin: 0;
    }

    &__image-caption {
        position: absolute;
        bottom: .75rem;
        right: 1.25rem;
        color: var(--rocket-color-white-base);
        text-shadow: 1.5px 1.5px 2px var(--rocket-color-black-base);
        font-family: var(--rocket-font-tertiary);
        font-size: 0.75rem;
        font-weight: 300;
        z-index: 5;
        max-width: calc(100% - 2.5rem);
    }

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

        img {
            @include transition(transform);

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

        &::after {
            @include cover;

            background-color: rgba(0, 0, 0, .35)
        }
    }

    &__content {
        @include transition;
        @include absolute(0, 0, 0, 0);
        @include size(100%, auto);

        //background-color: rgba(0, 0, 0, 0.36);
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 26px;
        text-align: center;
        will-change: height;

        @include breakpoint(lg) {
            padding: 30px 64px;
        }

        &::before {
            @include transition;
            @include absolute(30px, 30px, 30px, 30px);

            border: 2px solid var(--rocket-color-white-base);
            border-radius: 3px;
            content: "";
            opacity: 0;
        }
    }

    &__title,
    &__description {
        text-shadow: 1.5px 1.5px 2px var(--rocket-color-black-base);
    }

    &__title {
        color: var(--rocket-color-white-base);
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 1.2;
    }

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

        &::after {
            @include cover;
        }
    }

    &__description {
        @extend %base-styles-text;
        @include transition($duration: 500ms);

        color: var(--rocket-color-white-base);
        line-height: 1.2;
        max-height: 0;
        opacity: 0;
    }

    &:hover,
    &:focus-within {
        .our-offers-item__content {
            &::before {
                bottom: 12px;
                left: 12px;
                top: 12px;
                right: 12px;
                opacity: 1;
            }
        }

        .our-offers-item__description {
            max-height: 100%;
            opacity: 1;
        }
    }
}