/* Immagini laterali comandate dalla didascalia Ghost.
   Formato: foto-sinistra: riferimento | didascalia visibile */

/*
 * Ghost normally renders article children as grid items. Floats cannot wrap
 * across those grid items, so photo articles use a centred continuous flow.
 */
.gh-article .gh-content.if-photo-flow-content {
    display: block;
    width: min(720px, calc(100% - 8vw));
    margin-right: auto;
    margin-left: auto;
}

.gh-article .gh-content .if-photo-float {
    display: block;
    clear: none;
    width: min(28%, 300px);
    max-width: 100%;
    margin-top: 0.25em !important;
    margin-bottom: 1.4rem !important;
}

.gh-article .gh-content .if-photo-float + .if-photo-paragraph {
    margin-top: 0 !important;
}

.gh-article .gh-content .if-photo-left {
    float: left;
    margin-right: 2rem !important;
    margin-left: 0 !important;
}

.gh-article .gh-content .if-photo-right {
    float: right;
    margin-right: 0 !important;
    margin-left: 2rem !important;
}

.gh-article .gh-content::after {
    display: block;
    clear: both;
    content: "";
}

.gh-article .gh-content .if-photo-float img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.gh-article .gh-content .if-photo-caption {
    display: block;
    margin: 0.7rem 0 0 !important;
    padding: 0;
    color: #777;
    font-family: var(--font-sans-serif);
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

@media (max-width: 700px) {
    .gh-article .gh-content.if-photo-flow-content {
        width: calc(100% - 8vw);
    }

    .gh-article .gh-content .if-photo-float {
        float: none;
        width: min(72%, 280px);
        margin: 0 auto 2rem !important;
    }
}