/* ==========================================================================
   Summer Sale promo banner
   The entire banner is one clickable image; a <picture> swaps the desktop and
   mobile artwork. All copy + the button are baked into the image itself.
   ========================================================================== */

.summer-sale,
.summer-sale picture {
    display: block;
    width: 100%;
    line-height: 0; /* kill the inline-image gap so there's no whitespace above/below */
}

.summer-sale img {
    display: block;
    width: 100%;
    height: auto;
}

.summer-sale {
    margin-top: 40px;
}

@media screen and (max-width: 991px) {
    .summer-sale {
        margin-top: 20px;
    }
}