.banner,
.banner-small
    width: 100%
    position: relative
    color: RGB($fg-white)

    &::after
        content: ''

        width: $rad
        height: calc(#{$rad} * 2)

        position: absolute
        bottom: calc(#{$rad} * -2)
        left: 0

        background-color: RGB($bg-bright)
        border-radius: $rad 0 0 0
        box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)

.banner
    height: 30rem
    background-color: RGB($bg-300)

    img
        position: absolute
        inset: 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, RGB($primary), transparent)

        z-index: +1

    .banner-content
        padding: 0.5rem

        width: 100%
        height: auto

        position: absolute
        left: 0
        bottom: 0

        display: grid
        grid-template-columns: 1fr auto
        grid-template-rows: 1fr auto auto
        grid-template-areas: 'info info' 'header header' 'subtitle options'
        gap: 0.5rem

        z-index: +2

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

        .banner-header
            grid-area: header

            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            text-align: left
            font-size: 6.9rem
            font-weight: 800

            color: RGB($primary)

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

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

.banner-small
    height: 3.5rem
    background-color: RGB($bg-100)

    .banner-content
        padding: 0.5rem

        width: 100%
        height: 100%

        position: absolute
        inset: 0

        display: grid
        grid-template-columns: auto 1fr auto
        gap: 1rem

        z-index: +2

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

        .banner-header
            padding-bottom: 0.25rem

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

            color: RGB($primary)

        .banner-info
            font-size: 0.9rem
            font-weight: 600

        .pill-row
            width: auto
            justify-self: flex-end
            display: inline-flex

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

    .banner
        min-height: 17rem
        height: auto

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

            display: flex
            flex-direction: column
            justify-content: center
            align-items: center
            gap: 0.25rem

            .banner-header
                font-size: 3rem
                text-align: center

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

            .pill-row
                margin-top: 1rem

    .banner-small
        .banner-content
            display: flex
            flex-direction: row
            justify-content: space-between
            gap: 0

            .banner-header
                margin: auto 1rem
                text-align: center

            .banner-info
                display: none