@import "dependencies";

.willow-banner {
    @extend .butter;

    @include compact;

    background-color: $component-banner-background-color;
    background-repeat: no-repeat;
    background-size: cover;
    color: $component-banner-text-color;
    margin-top: $space;
    padding-bottom: space(4);
    padding-top: space(4);
    position: relative;
    text-align: center;
    z-index: 1;

    &::after {
        background-color: inherit;
        bottom: 0;
        content: "";
        left: 0;
        opacity: 0.8;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

    @import "icon";
    @import "heading";
    @import "content";
    @import "actions";
    @import "action";
}