.banner
    width: 100%
    height: 40vh

    position: relative

    background-color: $black
    color: $black

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

    img
        position: absolute
        top: 0
        left: 0

        width: 100%
        height: 100%

        background-color: $black

        object-fit: cover
        object-position: center center

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

        width: 100%
        height: 100%

        background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))

        z-index: +1

    .banner-content
        padding: 1rem

        width: 100%
        height: inherit

        position: relative

        display: flex
        flex-direction: column
        justify-content: flex-end
        gap: 0.5rem

        z-index: +2

        h1
            margin: 0
            padding: 0

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

            color: $black

        p
            margin: 0
            padding: 0

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

            color: $black

@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: 3.5rem
                text-align: center

            p
                font-size: 1.1rem
                text-align: center