.banner,
.banner-small
    width: 100%
    position: relative
    color: var(--foreground-white)

    .link
        padding: 0.1rem 0.3rem

        text-decoration: none
        font-weight: 500

        background-color: var(--foreground-white)
        color: var(--foreground-black)
        border-radius: calc(var(--radius) / 2)

        cursor: pointer

        &:hover
            background-color: var(--foreground-black)
            color: var(--foreground-white)

.banner
    height: 30rem
    max-height: 69vh

    img
        position: absolute
        top: 0
        left: 0

        width: 100%
        height: 100%

        background-color: inherit

        object-fit: cover
        object-position: center center

    .banner-filter
        position: absolute
        inset: 0

        width: 100%
        height: 100%

        background: linear-gradient(to right, var(--background-100), transparent)

        z-index: +1

    .banner-content
        padding: 0.5rem

        width: 100%
        height: auto

        position: absolute
        left: 0
        bottom: 0

        display: grid
        grid-template-columns: auto 1fr auto
        grid-template-areas: 'info info info' 'image header header' 'subtitle subtitle options'

        z-index: +2

        .banner-header,
        .banner-info,
        .banner-subtitle
            margin: 0
            padding: 0
            width: 100%

        .banner-header
            grid-area: header

            margin: 0.5rem 0

            text-align: left
            font-size: 6.9rem
            font-weight: 700

            color: var(--primary)

        .banner-info
            grid-area: info
            font-size: 1rem
            font-weight: 400
        .banner-subtitle
            grid-area: subtitle
            font-size: 1rem
            font-weight: 400

        .pill-row
            margin-top: auto
            grid-area: options

        .banner-picture
            grid-area: image

            margin: auto 1rem auto 0

            position: relative

            width: 6.9rem
            height: 6.9rem

            background-color: var(--primary)
            border-radius: var(--rad)
            overflow: hidden

.banner-small
    height: 3.5rem

    .banner-content
        padding: 0 0.5rem

        width: 100%
        height: 100%

        position: absolute
        inset: 0

        display: flex
        flex-direction: row
        justify-content: flex-start

        z-index: +2

        .banner-header,
        .banner-info
            margin: auto 0
            padding: 0
            width: auto
            height: auto
            justify-self: flex-start

        .banner-header
            margin-right: 0.6rem

            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            text-align: left
            font-weight: 700
            font-size: 1.5rem

            color: var(--primary)

        .banner-info
            margin-right: 0.6rem

            font-size: 0.9rem
            font-weight: 400

        .pill-row
            margin-left: auto
            width: auto

@media (max-width: var(--breakpoint))
    .banner,
    .banner-small
        &::after
            display: none

    .banner
        min-height: 15rem
        height: auto
        max-height: 30vh

        .banner-filter
            background: linear-gradient(to bottom, var(--background-100), transparent)

        .banner-content
            padding: 0.5rem
            height: 100%

            display: flex
            flex-direction: column
            justify-content: center
            align-items: center

            .banner-header
                margin: 0.7rem 0
                text-align: center
                font-size: 2.5rem

            .banner-info
                font-size: 1.1rem
                text-align: center

            .banner-subtitle
                display: none

            .pill-row
                margin-top: 0

            .banner-picture
                margin: 0 auto
                width: 4rem
                height: 4rem
                display: flex

    .banner-small
        .banner-content
            .banner-info
                display: none