.block-banner {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    background-color: white;
    height: clamp(300px, 50vw, 60vh);
    
    .block-inner {
        position: relative;
        margin-left: 0 !important;
    }
    .block-bg-image-container {
        z-index: 0;
        bottom: 75px;
        top: 0;
        right: 0;
        left: 0;
        max-height: 100%;
        img {
            background: white;
            background-repeat: no-repeat;
            object-position: -30px bottom;
            background-image: none !important;
            object-fit: contain;
            width: calc(100% + 30px) !important;
        }
    }
    &.large {
        height: clamp(400px, 60vw, 65vh);
        .block-bg-image-container img {
            object-position: right bottom;
            width: 100%;
        }
    }
}

@media screen and (min-width: 500px) {
    .block-banner {
        .block-bg-image-container img {
            object-position: right bottom;
            width: 100%;
        }
    }
}

@media screen and (min-width: 52em) {
    .block-banner {
        .block-bg-image-container {
            bottom: 52px;
            img {
                object-fit: cover;
                object-position: right top !important;
            }
        }
        .content-col {
            margin-top: 4em;
            margin-left: 3em;
        }
    }
}