/* *****************************************************************************
*
*  Banner
*
* ***************************************************************************** */

.bf-banner {
    position: relative;
    padding: 1rem 1.5rem;
    background-color: var(--bf-color-bg-underground);
    border-radius: var(--bf-border-radius-small);
    overflow: hidden;

    &--has-visual {
        padding: 0.5rem 1.5rem 0.5rem 1rem;
    }
    &__visual {
        margin-right: .5rem;

        img {
            width: 4.5rem;
            height: 4.5rem;
        }
    }
    .bf-banner__content {
        padding: 0.5rem 0;
    }
    .bf-badge {
        position: absolute;
        right: 0;
        top: 0;
    }
}

.bf-color-bg-underground .bf-banner {
    background-color: var(--bf-color-bg-ground);
}