/*
==========================================
Express Industries Sections
Mobile Responsive CSS
==========================================
*/

/* ==========================================
   Tablet + Mobile
========================================== */

@media screen and (max-width: 768px) {

    /* Stack floated images */
    figure.figure--right,
    figure.figure--left {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 15px auto !important;
        text-align: center !important;
    }

    /* Larger images */
    figure.figure--right img,
    figure.figure--left img {
        width: calc(100vw - 30px) !important;
        max-width: 100% !important;
        height: 220px !important;
        padding: 10px !important;
        border-radius: 20px !important;
        object-fit: cover !important;
        box-sizing: border-box !important;
    }

    /* Content cards */
    blockquote {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 30px 0 !important;
        padding: 20px 0 !important;
        border-radius: 20px !important;
    }

    /* Headings */
    blockquote h2 {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        line-height: 1.25 !important;
        font-size: 28px !important;

        /* Keep inline alignment */
        text-align: inherit !important;
    }

    /* Paragraphs */
    blockquote p {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        font-size: 16px !important;

        /* Keep inline alignment */
        text-align: inherit !important;
    }

    /* Preserve alternating borders */
    blockquote[style*="border-right"] {
        border-right: 4px solid #005288 !important;
    }

    blockquote[style*="border-left"] {
        border-left: 4px solid #005288 !important;
    }

    /* Prevent ugly wrapping */
    blockquote h2 span {
        display: inline !important;
        word-break: normal !important;
    }
}

/* ==========================================
   Small Phones
========================================== */

@media screen and (max-width: 480px) {

    figure.figure--right img,
    figure.figure--left img {
        width: calc(100vw - 20px) !important;
        height: 200px !important;
        padding: 8px !important;
    }

    blockquote {
        padding: 15px 0 !important;
        margin-bottom: 20px !important;
    }

    blockquote h2 {
        font-size: 24px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    blockquote p {
        font-size: 15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}