.banner
    width: 100%
    height: 50vh

    position: relative

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

    overflow: hidden
    transition: opacity 0.3s ease-in-out

    img
        position: absolute
        top: 0
        left: 0

        width: 100%
        height: 100%

        background-color: RGB($bg-300)

        object-fit: cover
        object-position: center center

    .banner-filter
        position: absolute
        top: 0
        left: 0

        width: 100%
        height: 100%

        background: linear-gradient(to right, RGB($primary), transparent)

        z-index: +1

    .banner-content
        padding: 1rem

        width: 100%
        height: inherit

        position: relative

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

        z-index: +2

        h1
            margin: 0
            padding: 0

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

            color: RGB($primary)

        p
            margin: 0
            padding: 0

            font-size: 1rem
            font-weight: 600
            line-height: 1
            text-align: left

    &.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
                padding-bottom: 0.25rem
                font-size: 1.5rem
                text-align: left

            p
                font-size: 0.9rem
                text-align: left

@media (max-width: $breakpoint)
    .banner
        width: 100vw
        height: 25vh

        .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