.align-custom-align-left {
    text-align: left;
}

.align-custom-align-right {
    text-align: right;
}

.align-custom-center {
    text-align: center;
}

.align-custom-wrap-left {
    padding-top: 8px;
    padding-right: 20px;
    padding-bottom: 0 !important;
    float: left;
}

.align-custom-wrap-right {
    padding-top: 8px;
    padding-left: 20px;
    padding-bottom: 0 !important;
    float: right;
}

.align-custom-full-width {
    width: 100%;
    object-fit: cover;
}
.align-custom-half-width-left {
    float: left;
    width: 48%;
    margin-right: 2%;
    object-fit: cover;
}
.align-custom-half-width-right {
    float: right;
    width: 48%;
    margin-left: 2%;
    object-fit: cover; 
}

/* Special class used on div that wraps multiple PicturePlugins inside TextPlugin, so those images
are wrapped left one under another, in one column. This is used to mimic images placement inside text in original typo3
content pages. IF THOSE IMAGES NEED TO BE REARANGED IN FUTURE, IN TEXT PLUGIN EDITOR, WE HAVE TO OPEN SOURCE VIEW, AND 
REMOVE THIS WRAPPER DIV - THEN WE'LL BE ABLE TO ARANGE IMAGES SEPARATELY. */
div.text-plugin-imgs-force-column-left {
    float: left;
    padding-right: 5px;
}

img.cms-picture-img {
    /* padding-top: 10px;
    padding-bottom:20px; */
    border-radius: unset !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}


figcaption.caption {
    font-size: 14px;
    font-style: italic;
    color: #666666;
    padding-top: 4px;
    font-family: 'Frank Ruhl Libre', serif;
    padding-bottom: 20px;
}

@media (max-width: 500px) {
    .img-div-wrapper, .img-figure-wrapper {
        width: 100% !important;
    }

    img.cms-picture-img {
        width: 100%;
        height: auto;
        float: unset;
        padding-left: 0;
        padding-right: 0;
    }

    figcaption.caption {
        padding-left: 0 !important;
        padding-bottom: 25px;
        width: 100% !important;
    }

    .align-custom-wrap-left {
        padding-right: 0;
    }

    .align-custom-wrap-right {
        padding-left: 0;
    }
}