.hero--resin {
    --hero-bg-image: url('../images/resin/resin-glass-background.jpg');
    --hero-bg-position: 50% 70%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), var(--hero-bg-image) var(--hero-bg-position) / cover no-repeat;
}

    /* make sure text sits above background */
    .hero--resin > .container {
        position: relative;
        z-index: 2;
    }


/* Extra small phones */
@media (max-width: 575.98px) {
    .hero--resin {
        --hero-bg-position: 50% 18%;
    }

        .hero--resin h1 {
            font-size: 2.5rem;
            line-height: 1.05;
        }

        .hero--resin .lead {
            font-size: 1rem;
        }
}

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero--resin {
        --hero-bg-position: 50% 80%;
    }

        .hero--resin h1 {
            font-size: 3.25rem;
        }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero--resin {
        --hero-bg-position: 50% 80%;
    }

        .hero--resin h1 {
            font-size: 4.5rem;
        }
}

/* Large and up */
@media (min-width: 992px) {
    .hero--resin {
        --hero-bg-position: 50% 85%;
    }

        .hero--resin h1 {
            font-size: 6rem;
        }
}

@media (min-width: 1400px) {
    .hero--resin {
        --hero-bg-position: 45% 80%;
    }
}