
    .service{
        grid-template-columns: 1fr;
    }

    .service > ul > lh{
        font-size: 1.25em; /* same size as h2*/
        white-space: normal;
        margin: 15px 0px;
        display: block;
        font-weight: bold;
    }

    .service > ul > li::before{
        content: "\2713\0020";
        color: #c20000;
        margin-left: -2em;
        width:1em;
    }

    .service > ul > li{
        display: block;
        margin-bottom: 6px;
        text-indent: 1em;
        padding-left: 1em;
    }

    .service > img{
        width: 100%;
        grid-row: 1;
    }

/* tablet only */
@media screen and (min-width:701px) and (max-width:1100px){
    .service > ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-around;
        column-gap: 5vw;
    }

    .service > ul > lh{
        grid-column: span 2;
    }

      /*  .service{
        grid-template-columns: 1fr 1fr;
        justify-content: start;
    }

    .service > section:first-child{
        grid-column: span 2;
    }

    .service > section:last-child{
        grid-column: span 2;
    }



    .service > img{
        grid-area: 2 / 1 / span 1 / span 2;
    }

    .service > ul{
        grid-area: 2 / 2 / span 1 / span 1;
        position: relative;
        width: min-content;
        height: min-content;
        white-space: nowrap;
        border: 1px solid #707070;
        justify-self: center;
    }
*/
}

@media screen and (min-width: 851px) and (max-width: 1101px){
    .service > ul{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .service > ul > lh{
        grid-column: span 3;
    }
}

/*Desktop only*/
@media screen and (min-width: 1101px){
    .service{
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 5em minmax(5em, max-content) auto 10vw auto;
        justify-content: start;
    }

    .service > img{
        grid-area: 3 / 1 / span 2 / span 2;
    }

    .service > ul{
        grid-area: 2 / 2 / span 2 / span 1;
        position: relative;
        width: 330px;
        box-sizing: border-box;
        height: min-content;
        white-space: nowrap;

    }



    .service > section:first-child{
        grid-area: 1 / 1 / span 2 / span 1;
        height: fit-content;
    }

    .service > section:last-child{
        grid-area: 4 / 1 / span 2 /span 2; 
        margin: 0px 5.85vw; /* same as pad-half-xl*/
    }


}