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

    .content
        h1 + p
            margin-top: $spacing1
        figure
            &, img, picture
                display: block
            figcaption
                @include meta
                color: $color-text-alt
                a
                    color: inherit

    // TODO : handle hero with image
    // @if $breadcrumb-below-h1
    //     .container:first-child
    //         display: flex
    //         flex-direction: column
    //         nav + .content
    //             margin-top: 0
    //         .breadcrumb-nav
    //             order: 3
    //             margin-top: $spacing3

    figure
        position: relative
        figcaption
            position: absolute
            display: block
            left: 0
            right: 0
            z-index: 10
            &::before
                content: '©'
                position: absolute
                right: 0
                top: 0
                padding: half($spacing0) $spacing0
                background: $color-background-alt
                display: block
            p
                background: $color-background-alt
                display: none
                padding: half($spacing0) $spacing0
            &:focus, &:hover
                p
                    display: block


    @include media-breakpoint-down(desktop)
        &--with-image
            padding-bottom: 0
        &--image-landscape
            figure
                margin: half($spacing3) half(-$grid-gutter-sm) 0
        &--image-portrait, &--image-square
            .container
                display: flex
                flex-direction: column
                margin-bottom: $spacing5
            figure
                margin-bottom: calc(#{-$spacing5} + #{$spacing2})
                margin-top: $spacing1

    @include media-breakpoint-up(desktop)
        $negative-margin-bottom: px2rem(150)
        .content
            > h1, > hgroup
                width: col(9)
        &--with-image
            margin-bottom: $negative-margin-bottom
            .content
                display: flex
                justify-content: space-between
                > h1, > hgroup
                    width: col(7)
                figure
                    width: col(5)
                    margin-bottom: -$negative-margin-bottom
                    // If there's no credits
                    picture:last-child
                        margin-bottom: $spacing2
        &--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
                    margin-top: calc(-#{$spacing3} - #{$spacing2})
                    width: col(3)