@use '../consts.scss' as consts;
@use '../colors.scss' as colors;
@use '../mixins.scss' as mixins;

$heading-color: colors.$color-gold;

.heading {
    display: flex;
    align-items: center;
    gap: consts.$gap-large;

    --heading-color: var(--color-heading, #{$heading-color});

    @include mixins.media(sm) {
        gap: 20px;
    }

    & > .spacer {
        position: relative;
        width: 100%;
        height: 1px;
        background-color: var(--heading-color);

        &::before {
            @include mixins.circle-base(11px);
            right: -5px;
            bottom: -5px;
            background-color: var(--heading-color);

        }

        &:last-child {
            &::before {
                right: unset;
                left: -5px;
            }

        }
    }

    & > .title {
        @include mixins.text("heading-2");
        color: var(--heading-color);
        text-transform: uppercase;
        text-wrap: nowrap;
        margin: 0;

        @include mixins.media(md) {
            @include mixins.text('heading-4')
        }

        @include mixins.media(sm) {
            text-wrap: wrap;
            text-align: center;
            width: 65vw;
            @include mixins.text('heading-6')
        }
    }
}