.banner {
    background-color: var(--rocket-color-red-200);
    color: var(--rocket-color-white-base);
    display: flex;
    gap: 40px 85px;
    flex-direction: column;

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

    &__text,
    &__infos {
        @include breakpoint(lg) {
            width: 1%;
            flex-grow: 1;
        }
    }

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

    &__infos {
        display: flex;
        flex-direction: column;
        row-gap: 14px;
    }

    &__info-item {
        @extend %base-styles-text;

        a {
            text-decoration: none;

            @include event {
                text-decoration: underline;
            }
        }
    }

    &--md {
        max-width: 1100px;
    }
}