.banner
    width: 100%
    height: 30rem

    position: relative

    background-color: RGB($bg-300)
    color: RGB($fg-white)

    transition: opacity 0.3s ease-in-out

    &::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)

    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: 1rem

        width: 100%
        height: 100%

        position: absolute
        inset: 0

        display: flex
        flex-direction: column
        justify-content: flex-end

        z-index: +2

        h1, p
            margin: 0
            padding: 0

            width: 100%

            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            text-align: left

        h1
            font-size: 6.9rem
            font-weight: 800

            color: RGB($primary)

        p
            font-size: 1rem
            font-weight: 600

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

        .banner-content
            padding: 0.5rem

            flex-direction: row
            justify-content: flex-start
            align-items: center
            gap: 1rem

            h1
                width: auto
                padding-bottom: 0.25rem
                font-size: 1.5rem

            p
                width: auto
                font-size: 0.9rem

@media (max-width: $breakpoint)
    .banner
        width: 100%
        height: 17rem

        &::after
            display: none

        .banner-content
            padding: 0.5rem

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

            h1
                font-size: 3rem
                text-align: center

            p
                font-size: 1.1rem
                text-align: center
        
        &.small
            .banner-content
                justify-content: center

                h1
                    text-align: center

                p
                    display: none