.banner
    margin: 0
    padding: 0

    width: calc(100vw - 3.5rem)
    height: 40vh

    position: relative
    top: 0
    left: 3.5rem

    background-color: $white
    color: $black

    background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
    background-size: 1000px 640px
    animation: imgLoading 1.8s linear infinite forwards

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

    img
        position: absolute
        top: 0
        left: 0

        width: 100%
        height: 100%

        background-color: $white

        object-fit: cover
        object-position: center center

    span
        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
    margin: 0
    padding: 1rem

    width: 100%
    height: 100%

    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

        left: 0

        span
            background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))

    .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