.heading {
    $this: &;

    margin-bottom: 10px;

    @include breakpoint(lg) {
        margin-top: 0;
    }

    &:has(h1) {
        margin-bottom: 50px;
    }

    &:not(:has(.breadcrumbs)) {
        padding-top: 3rem;
    }

    &__wrapper {
        @extend .container;
        @extend .container--xl;

        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    &__media-wrapper {
        position: relative;
        height: calc(100vh - 45px);
        min-height: 660px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 200px;

        @include breakpoint(lg) {
            padding-bottom: 250px;
        }

        &::before {
            @include size(100%, 320px);

            content: '';
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(0deg, transparent 0%, var(--rocket-color-black-base) 100%);
            opacity: 0.65;
            z-index: 2;
        }
    }

    &__media-container {
        @include size(100%);

        display: block;
        position: absolute;
        left: 0;
        top: 0;
    }

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

    &__title {
        padding-top: 50px;

        @include breakpoint(lg) {
            padding-top: 0;
        }
    }

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

        margin-top: 25px;
    }

    .rte {
        margin-top: 25px;
    }
}