#support-bar {
    height: var(--header-h);
    background-color: var(--color-accent);
    color: var(--color-bg);
    padding: 0 var(--padding-body);

    

    .support-bar__container {
        max-width: var(--max-w-cards);
        margin: 0 auto;

        height: 100%;
        display: flex;

        @media #{$small-up} {

            align-items: center;
            justify-content: space-between;
            gap: 2ch;
        }

        @media #{$small} {
            flex-direction: column;
            font-size: var(--fs-small);
            line-height: 1.1;
            align-items: flex-start;
            justify-content: center;
        }

    }

    .baseline {
        text-transform: uppercase;
        font-weight: 500;

    }

    .btn {
        text-transform: uppercase;
        color: var(--color-bg);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 2px;
        word-wrap: nowrap;
        white-space: nowrap;

        &:hover {
            opacity: 0.7;
        }
    }


     @media #{$small} {
            height: auto;
            padding: calc(var(--spacing)*0.75) var(--padding-body);
            .btn{
                margin-top: calc(var(--spacing)*0.75);
            }
    }


}