/* Example: "So sieht es auf Ihrer Webseite aus" – pictures of the website in a grey frame, each with a short caption. */

.cb-example {
    margin-bottom: var(--cb-example-gap, 1.5rem);
    padding: var(--cb-example-padding, 1rem 1.25rem);
    border: 1px solid var(--cb-example-border-color, var(--bs-border-color));
    border-radius: var(--cb-example-radius, var(--bs-border-radius));
    background-color: var(--cb-example-bg, var(--bs-tertiary-bg));
}

.cb-example-heading {
    margin-bottom: 0.75rem;
    font-size: var(--cb-example-heading-size, 1.125rem);
}

.cb-example-item {
    margin: 0;
}

.cb-example-item + .cb-example-item {
    margin-top: 1rem;
}

/* the picture stands on white like on the website */
.cb-example-frame {
    border: 1px solid var(--cb-example-border-color, var(--bs-border-color));
    background-color: var(--cb-example-image-bg, var(--bs-body-bg));
}

.cb-example-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.cb-example-caption {
    margin-top: 0.5rem;
    color: var(--cb-example-caption-color, var(--bs-body-color));
}