hero.sass

.hero
    // Support gradients
    background: $hero-background-color
    // Fallback color
    background-color: $hero-background-color
    color: $hero-color
    margin-bottom: $spacing-3
    min-height: $hero-height
    padding-bottom: $spacing-3
    padding-top: var(--header-height)
    position: relative
    @include media-breakpoint-up(desktop)
        margin-bottom: $spacing-5
        min-height: $hero-height-desktop
        padding-bottom: $spacing-5
    *:focus-visible
        outline-color: $hero-color
    .content
        align-items: start
        .hero-text
            margin-top: $spacing-5
        h1
            // posts, projects and events subtitles
            > span
                color: var(--color-text-alt)
                display: block
            + p
                margin-top: $spacing-3
        .btn
            margin-top: $spacing-3
        hgroup.has-lead > p
            @include lead-hero
        figure
            position: relative
            &, img, picture
                display: block
            img, button
                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
            margin-bottom: $spacing-7
            .container
                display: flex
                flex-direction: column
            figure
                margin-bottom: calc(#{-$spacing-7} + #{$spacing-4})
        figure
            > button
                width: 100%

    @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

    // Essential container is used in programs and diplomas
    .essential-container
        margin-top: $spacing-5
        .container
            @include media-breakpoint-up(md)
                align-items: start
                display: flex
                justify-content: space-between
        .essential
            @include meta
            color: $header-color
            flex-wrap: wrap
            font-size: $program-essential-font-size
            margin-bottom: 0
            margin-top: 0
            @include media-breakpoint-up(md)
                @include grid(6, false, 0)
                width: columns(6)
                font-size: $program-essential-font-size-desktop
            dt,
            dd
                margin: 0
                padding-bottom: $spacing-2
                padding-top: $spacing-2
                &:last-of-type
                    padding-bottom: 0
            dt
                grid-column: 1/3
                color: var(--color-text-alt)
                @include media-breakpoint-down(md)
                    padding-bottom: 0
            dd
                display: flex
                flex-wrap: wrap
                column-gap: $spacing-2
                grid-column: 3/7
                @include media-breakpoint-down(md)
                    padding-top: 0
                a
                    @include link($hero-color)
                    white-space: nowrap
        .buttons
            @include meta
            display: flex
            flex-wrap: wrap
            justify-content: space-between
            a.website
                @include button-icon(links-line)
                text-align: left
            a[download]
                @extend .button-alt
                @include button-icon(download-2-line)
                &::after
                    font-size: 1.2em
            @include media-breakpoint-down(md)
                flex-direction: row
                gap: $spacing-3
                button,
                > a
                    width: columns(6)
                button
                    min-width: auto
                .website
                    width: 100%
            @include media-breakpoint-up(md)
                flex-direction: column
                gap: $spacing-3
                button,
                > a
                    max-width: columns(4)
            @include media-breakpoint-up(xl)
                .dropdown-share,
                &
                    --btn-min-width: #{columns(3)}
            @include media-breakpoint-down(desktop)
                margin-top: $spacing-3