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: $spacing3
    padding-top: var(--header-height)
    position: relative
    margin-bottom: $spacing3
    @include media-breakpoint-up(desktop)
        min-height: $hero-height-desktop
    *:focus-visible
        outline-color: $hero-color

    .content
        align-items: start
        padding-top: $spacing3
        > h1, > hgroup
            margin-top: $spacing3
            
        h1 + p
            margin-top: $spacing1
        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: $spacing3

    @include media-breakpoint-down(desktop)
        .breadcrumb-nav
            margin-left: half(-$grid-gutter-sm)
            margin-right: half(-$grid-gutter-sm)
            > ol
                padding: 0 half($grid-gutter-sm)
        &--with-image
            padding-bottom: 0
            .content
                > h1, > hgroup
                    margin-bottom: $spacing2
        &--image-landscape
            figure
                margin-left: half(-$grid-gutter-sm)
                margin-right: half(-$grid-gutter-sm)
        &--image-portrait, &--image-square
            .container
                display: flex
                flex-direction: column
                margin-bottom: $spacing5
            figure
                margin-bottom: calc(#{-$spacing5} + #{$spacing2})

    @include media-breakpoint-up(desktop)
        .content
            > h1, > hgroup
                width: col(9)
        &--with-image
            .content
                display: flex
                justify-content: space-between
                > h1, > hgroup
                    width: col(7)
                figure
                    width: col(5)

        &--image-portrait, &--image-square
            .breadcrumb-nav
                width: calc(#{col(9)} + #{half($grid-gutter)})
                -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: 50px
            .content
                > h1, > hgroup
                    width: col(8)
                figure
                    width: col(3)