/* Regole per l'HTML generato tramite EditorHTML.ascx */

div#articles {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 768px) {
    div#articles {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    div#articles .article {
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
    }

    .block-1,
    .block-2,
    .block-3 {
        flex: 1 1 100%;
    }
}

div#articles .article {
    box-sizing: border-box;
}

div#articles .article.block-1 {
    flex: 0 1 calc(33.333% - 10px);
    max-width: calc(33.333% - 10px);
}

div#articles .block-2 {
    flex: 0 1 calc(66.666% - 10px);
    max-width: calc(66.666% - 10px);
}

div#articles .block-3 {
    flex: 0 1 calc(100% - 10px);
    max-width: calc(100% - 10px);
}

div#articles .article .title {
    font-size: 1.2em;
    font-weight: bold;
}

div#articles .article .content,
div#articles .article .image {
    margin-top: 10px;
}

div#articles .article .content {
    text-align: justify;
}

div#articles .article .image {
    width: 100%;
    height: auto;
}

div#articles .article .image img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

div#articles .article .image img.ImgS {
    max-width: min(250px, 50%) !important;
    /* Dimensione piccola */
    max-height: min(200px, 15vw) !important;
}

div#articles .article .image img.ImgM {
    max-width: min(500px, 75%) !important;
    /* Dimensione media */
    max-height: min(400px, 30vw);
}

div#articles .article .image img.ImgL {
    max-width: min(800px, 100%) !important;
    /* Dimensione grande */
    max-height: min(600px, 50vw) !important;
}

@media (max-width: 1200px) {
    div#articles .article .image img.ImgS {
        max-height: min(200px, 25vw) !important;
    }
}

@media (max-width: 768px) {
    div#articles .article .image img.ImgS {
        max-height: 25vw !important;
    }

    div#articles .article .image img.ImgM {
        max-height: max(200px, 40vw);
    }

    div#articles .article .image img.ImgL {
        max-height: 60vw !important;
    }
}