.ss_date {
    font-size: 12px;
    margin-bottom: 20px;
    color: rgba(0,0,0,0.6)!important;
}
.ss_description {
    width: 80%;
    margin: 20px auto 0;
    overflow-x: auto;
}
.ss_description img {
    max-width: 100% !important;
    height: auto !important;
}
.ss_description table {
    max-width: 100% !important;
}
.ss_description .studio-editor-outer {
    box-sizing: border-box;
    max-width: min(800px, 100%) !important;
}
.news-feed-psq-container img {
    display: block;
    max-width: 100% !important;
    margin: 0 auto;
}

/* mimicking styles from psq post page */
img.fr-space-around-image, .fr-view img.fr-space-around-image {
    margin: 20px !important;
}
img.fr-framed-image, .fr-view img.fr-framed-image {
    border: 5px solid #dddddd;
    box-shadow: #222222 0px 10px 10px -10px;
    padding: 0;
}
img.fr-rounded-image, .fr-view img.fr-rounded-image {
    border-radius: 50%;
}
.tbl-rsp-right-column {
    padding-left: 8px;
}
.tbl-rsp-left-column {
    padding-right: 8px;
}
.tbl-rsp-center-column {
    padding-left: 4px;
    padding-right: 4px;
}
.smart_site_item .two-col {
    display: flex;
    width: 100%;
}
.smart_site_item .two-col > .column {
    box-sizing: border-box;
    min-width: 0;
    flex: 1 1 50%;
    max-width: 50%;
}
.smart_site_item .two-col > .column--small {
    flex-basis: 30%;
    max-width: 30%;
}
.smart_site_item .two-col > .column--large {
    flex-basis: 70%;
    max-width: 70%;
}
.ss_description .nl-builder_email-image_container {
    max-width: 100%;
}
@media (max-width: 800px) {
    .ss_description {
        width: 100%;
    }
    .ss_description table {
        width: 100% !important;
        table-layout: fixed;
    }
    .ss_description td,
    .ss_description th {
        box-sizing: border-box;
    }
    .ss_description .studio-editor-outer,
    .ss_description .video-table-cell,
    .ss_description .s_button_component {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}
@media (max-width: 480px) {
    .smart_site_item .two-col {
        display: block !important;
    }
    .smart_site_item .two-col > .column,
    .smart_site_item .two-col > .column--small,
    .smart_site_item .two-col > .column--large,
    .ss_description .s_text-wrapped-image-container {
        width: 100% !important;
        max-width: 100%;
        flex: none;
        float: none !important;
    }
    .ss_description .nl-builder_email-image_container {
        height: auto !important;
    }
    .ss_description td.tbl-rsp-column-container {
        display: block !important;
        width: 100% !important;
    }
    .ss_description img.tbl-rsp-image {
        max-width: 480px !important;
        width: 100% !important;
    }
    .ss_description td.tbl-rsp-left-column {
        display: block;
        width: 100% !important;
        padding: 0 0 6px !important;
    }
    .ss_description td.tbl-rsp-center-column {
        display: block;
        width: 100% !important;
        padding: 3px 0 !important;
    }
    .ss_description td.tbl-rsp-right-column {
        display: block;
        width: 100% !important;
        padding: 6px 0 0 !important;
    }
}
/* end of mimicking styles from psq post page */

/*
 * Studio newsletters put unbroken URLs in email tables. overflow-wrap: break-word
 * does not shrink a cell's min-content width, so the table grows past
 * .s_blocks_container (overflow: hidden) and the right side is clipped.
 * anywhere on the link shrinks that minimum, so the URL wraps inside the 800px
 * column. It is not set on td or th: that would also shrink ordinary words and
 * break them in a narrow column. !important beats the newsletter's own
 * break-word. max-width on the table does not shrink min-content, so it is not
 * used. Keep in sync with webroot/sass/components/_single-psq-post.scss.
 */
.ss_description .studio-editor-outer a,
.ss_description .s_blocks_container a {
    overflow-wrap: anywhere !important;
}