/* The bottom line is always on for this template, and both of its margins end up inside the
   wrapper div, which is the box the hover marking follows. The margins are removed here and
   the gap down to the next section is moved to .section-content instead, where it sits
   outside the wrapper and does not add to its height */
.template-type-11 + hr {
    margin-bottom: 0;
}

.section-content:has(.template-type-11) {
    margin-bottom: 22px;
}

.benefit-container {
    margin-top: 18px;
    /* The two containers are inline-block, so the line box would add room for descenders
       under the image and make the section taller than its content */
    line-height: 0;
}

    .benefit-container > div {
        line-height: 1.55;
        vertical-align: top;
    }

.benefit-img-container {
    width: 180px;
    height: 90px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    background-color: #fff;
}

    .benefit-img-container:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .benefit-img-container img {
        max-width: 80%;
        max-height: 70%;
        vertical-align: middle;
    }

.benefit-text-container {
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    margin-top: 2px;
}

    .benefit-text-container b {
        font-size: 11.5px;
    }

    .benefit-text-container h3 {
        margin-top: 4px;
        margin-bottom: 0;
    }