.hero {
    background-image: linear-gradient(rgba(20, 40, 80, 0.8), rgba(10, 20, 40, 0.8)), url('../img/products-hero.jpg');
    background-size: cover;
    background-position: 0% 10%;
}

.cta {
    background-image: url("../img/products-cta-bg-sm.svg"), url("../img/gradient.png");
}


@media only screen and (max-width: 375px) {
    h1 {
        font-size: 2.1em;
    }
}

@media only screen and (min-width: 768px) {
    .cta {
        background-image: url("../img/products-cta-bg.svg"), url("../img/gradient.png");
    }
}

@media only screen and (min-width: 1024px) {
    .hero {
        background-image: url("../img/products-bg.svg"), linear-gradient(rgba(20, 40, 80, 0.8), rgba(10, 20, 40, 0.8)), url('../img/products-hero.jpg');
        background-position: bottom, center, 0% 10%;
    }
}

.product {
    padding-bottom: 50px;
    grid-column: 1 / span 12;
}

.products-col-venom-img {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .product {
        padding-bottom: 100px;
    }

    .products-col-venom {
        grid-column: 1 / span 12;
    }

    .venom-img {
        width: 70%;
    }

    #venom-img-02 {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .products-col-1 {
        grid-column: 1 / span 5;
    }

    .products-col-2 {
        grid-column: 8 / span 5;
    }
}

@media only screen and (min-width: 1024px) {
    .products-col-venom {
        grid-column: 1 / span 6;
        grid-row: 2;
    }

    .products-col-venom-img {
        grid-column: 7 / span 6;
        padding: 25px;
    }

    .venom-img {
        width: 75%;
    }

    #venom-img-02 {
        bottom: 25px;
        right: 25px;
    }
}

@media only screen and (min-width: 1400px) {
    .products-col-venom {
        grid-column: 2 / span 5;
        grid-row: 2;
    }

    .products-col-venom-img {
        grid-column: 7 / span 6;
    }

    .products-col-1 {
        grid-column: 2 / span 4;
    }

    .products-col-2 {
        grid-column: 8 / span 4;
    }
}