.hero-banner {
    background-color: $c-4;
    padding: rem(80px 0);

    @include sm {
        padding: rem(40px 0);
    }

    &__content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: rem(16px);

        @include sm {
            margin-bottom: rem(24px);
            height: auto;
        }

        &__title {
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-size: $fs-64;
                font-weight: $fw-bold;
                line-height: $lh-11;
                color: $c-2;

                @include sm {
                    font-size: $fs-36;
                }
            }
        }

        &__text {
            font-size: $fs-20;
            font-weight: $fw-light;
        }

        &__buttons {
            display: flex;
            column-gap: rem(20px);

            @include sm {
                flex-direction: column;
                row-gap: rem(8px);
            }

            &__button {
                display: flex;

                @include sm {
                    .button {
                        width: 100%;
                    }
                }
            }
        }
    }

    &__image {
        display: flex;
        align-items: center;
        height: 100%;

        @include sm {
            justify-content: center;
        }

        img {
            max-height: rem(530px);
            width: auto;
            height: auto;

            @include sm {
                max-height: rem(350px);
            }
        }
    }
}