:root {
    --webkit-image-thumbnail-width: 200px;
    --webkit-image-gap-mv: 10px;
    --webkit-image-gap-dv: 20px;
    --webkit-image-border-color: #999999;
    --webkit-image-shadow-light-color: rgba(0,0,0,0.3);
    --webkit-image-shadow-strong-color: rgba(0,0,0,0.7);
}

webkit-image {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: var(--webkit-image-gap-mv);

    font-size: 1rem;
    font-family: "Open Sans", serif;
    color: #565656;
}
@media only screen and (min-width: 768px) {
    webkit-image {
        gap: var(--webkit-image-gap-dv);
    }
}

webkit-image .title {
    padding-top: 5px;
}

webkit-image > image-container {
    max-width: var(--webkit-image-thumbnail-width);
    width: var(--webkit-image-thumbnail-width);
    text-align: center;
    /*border: 1px solid #1e9d1e;*/
}

webkit-image.single > image-container {
    width: auto;
    max-width: 100%;
}

/* customer-image wird mit angegeben, damit nicht die Bilder vom Editor verändert werden. */
webkit-image img.customer-image {
    vertical-align: middle;
    padding: 0;
    margin: 0;

    max-width: 100%;
    width: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

webkit-image > image-container::after {
    content: "";
    flex-basis: var(--webkit-image-thumbnail-width);
}

/*
 * Backward compability
 */

webkit-image.crop {
    margin-left: 15px;
    margin-right: 15px;
}
webkit-image.crop > image-container {
    width: 180px;
    max-width: 100%;
}
webkit-image.crop.single > image-container {
    width: 400px;
    max-width: 100%;
}

/*
 * Image options
 */

/* Vertikale Ausrichtung */
webkit-image.opt-vertical-align-center {
    align-items: baseline;
}

/* Abstand Rand*/
webkit-image.single.opt-width-1 image-container {
    /*padding-left: 7%;*/
    /*padding-right: 7%;*/
    width: 400px;
}
webkit-image.single.opt-width-2 image-container {
    /*padding-left: 14%;*/
    /*padding-right: 14%;*/
    width: 600px;
}
webkit-image.single.opt-width-3 image-container {
    /*padding-left: 21%;*/
    /*padding-right: 21%;*/
    width: 800px;
}
/*
@media only screen and (min-width: 768px) {
    webkit-image.single.opt-width-1 {
        padding-left: 10%;
        padding-right: 10%;
    }
    webkit-image.single.opt-width-2 {
        padding-left: 20%;
        padding-right: 20%;
    }
    webkit-image.single.opt-width-3 {
        padding-left: 30%;
        padding-right: 30%;
    }
}*/

/* Abgerundete Ecken */
webkit-image.opt-rounded-1 img.customer-image {
    border-radius: 7px;
}
webkit-image.opt-rounded-2 img.customer-image {
    border-radius: 20px;
}
webkit-image.opt-rounded-3 img.customer-image {
    border-radius: 50px;
}
webkit-image.opt-rounded-4 img.customer-image {
    border-radius: 50%;
}

/* Rahmen */
webkit-image.opt-border-1 img.customer-image {
    border-width: 1px;
    border-style: solid;
    border-color: var(--webkit-image-border-color);
}
webkit-image.opt-border-2 img.customer-image {
    border-width: 2px;
    border-style: solid;
    border-color: var(--webkit-image-border-color);
}
webkit-image.opt-border-4 img.customer-image {
    border-width: 4px;
    border-style: solid;
    border-color: var(--webkit-image-border-color);
}
webkit-image.opt-border-8 img.customer-image {
    border-width: 8px;
    border-style: solid;
    border-color: var(--webkit-image-border-color);
}

/* Schatten */
webkit-image.opt-shadow-1 img.customer-image {
    box-shadow: 3px 3px 6px var(--webkit-image-shadow-light-color);
    margin-bottom: 8px;
}
webkit-image.opt-shadow-2 img.customer-image {
    box-shadow: 5px 5px 10px var(--webkit-image-shadow-strong-color);
    margin-bottom: 12px;
}