hero.sass

.hero
    // Support gradients
    background: $hero-background-color
    // Fallback color
    background-color: $hero-background-color
    color: $hero-color
    min-height: $hero-height
    padding-bottom: $spacing-5
    padding-top: var(--header-height)
    position: relative
    margin-bottom: $spacing-5
    @include media-breakpoint-up(desktop)
        min-height: $hero-height-desktop
    *:focus-visible
        outline-color: $hero-color
    .content
        align-items: start
        .hero-text
            margin-top: $spacing-5
        h1 + p
            margin-top: $spacing-3
        .btn
            margin-top: $spacing-3
        .lead
            @include lead-hero
        figure
            position: relative
            &, img, picture
                display: block
            img
                width: 100%
                height: auto
            @include collapsed-figcaption

    .breadcrumb-nav + .content
        padding-top: 0
    .content + .breadcrumb-nav
        margin-top: $spacing-5
    &--no-margin
        margin-bottom: 0
        & + .document-content
            margin-top: $spacing-5
    &--with-image
        figure
            position: relative
            > a
                @include stretched-link
    @include media-breakpoint-down(desktop)
        .content
            padding-top: 0
        &--with-image
            padding-bottom: 0
            .content
                .hero-text
                    margin-bottom: $spacing-4
        &--image-landscape
            .content
                figure
                    margin-left: var(--grid-gutter-negative)
                    margin-right: var(--grid-gutter-negative)
        &--image-portrait, &--image-square
            .container
                display: flex
                flex-direction: column
                margin-bottom: $spacing-7
            figure
                margin-bottom: calc(#{-$spacing-7} + #{$spacing-4})

    @include media-breakpoint-up(desktop)
        .content
            padding-top: $spacing-5
        .hero-text
            width: columns(9)
        &--with-image
            .content
                display: flex
                justify-content: space-between
                .hero-text
                    width: columns(7)
                figure
                    width: columns(5)

        &--image-portrait, &--image-square
            .breadcrumb-nav
                -webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%)
                mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%)
                .breadcrumb
                    padding-right: 10%
            .content
                .hero-text
                    width: columns(8)
                figure
                    width: columns(3)
    + .breadcrumb-container
        margin-top: 0
        @include media-breakpoint-down(desktop)
            margin-bottom: $spacing-5