.bg-sm-remove-lightblue {
    background-color: transparent !important;
}

.banner-image-wrapper {
    height: 300px;
    overflow: hidden;
}

.mobile-fig{
    margin-left: 1rem;
    transform: translateY(-30%) !important;
    width: 80%;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;

}

.mobile-text {
    background-color: #DEF1FDCC;
    padding: 8px;
    width: fit-content;

}

.mobile-text-name{
    background-color: #DEF1FDCC;
    padding: 8px;
    width: fit-content;
}

.banner-image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.banner-image-wrapper .highlight-center {
    object-position: left center;
}

.banner-image-wrapper .highlight-bottom {
    object-position: bottom;
}

.banner-image-wrapper .highlight-top {
    object-position: center 15%;
}

/* focus on left side until md, then focus on top*/
.banner-image-wrapper .highlight-left-md-top {
    object-position: left;
}

/* focus on left side until md, then focus on center*/
.banner-image-wrapper .highlight-left-md-center {
    object-position: left;
}

/* focus on left side until md, then focus on bottom*/
.banner-image-wrapper .highlight-left-md-bottom {
    object-position: left;
}


@media (min-width: 768px) {
    .mobile-fig{
        transform: translateY(-50%) !important;
        width: fit-content !important;
        right: -4px !important;
        left: unset !important;
        top: 50% !important;
        margin-left: 0 !important;
    }

    .mobile-fig > div {
        width: fit-content !important;
        max-width: none !important;
    }

    .mobile-text {
        background-color: transparent;
        width: fit-content;
        white-space: nowrap;

    }

    .mobile-text-name{
        background-color: transparent;
        width: fit-content;
        white-space: nowrap;

    }

    .bg-sm-remove-lightblue {
        background-color: #D4EDFCBF !important;
    }

    .banner-image-wrapper .highlight-left-md-top {
        object-position: center 15%;
    }

    .banner-image-wrapper .highlight-left-md-center {
        object-position: center;
    }

    .banner-image-wrapper .highlight-left-md-bottom {
        object-position: bottom;
    }

}