.elli-image {
    --bs-modal-bg: var(--elli-image-modal-background, #111111);
    --bs-modal-color: var(--elli-image-modal-color, #ffffff);

    inline-size: 100%;
    max-inline-size: var(--elli-image-max-width-full, 100%);
    margin-block: var(--elli-image-margin-block, 1.5rem);
    margin-inline: auto;
    color: var(--elli-image-caption-color, #4b5563);
}

.elli-image--centered {
    max-inline-size: var(--elli-image-max-width-centered, 56rem);
}

.elli-image--narrow {
    max-inline-size: var(--elli-image-max-width-narrow, 40rem);
}

.elli-image__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--elli-image-border-radius, 0.75rem);
    background: var(--elli-image-background, #f3f4f6);
}

.elli-image__img,
.elli-image-modal__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.elli-image--ratio-16x9 .elli-image__media,
.elli-image--ratio-4x3 .elli-image__media,
.elli-image--ratio-1x1 .elli-image__media {
    aspect-ratio: var(--elli-image-ratio, auto);
}

.elli-image--ratio-16x9 .elli-image__media {
    --elli-image-ratio: 16 / 9;
}

.elli-image--ratio-4x3 .elli-image__media {
    --elli-image-ratio: 4 / 3;
}

.elli-image--ratio-1x1 .elli-image__media {
    --elli-image-ratio: 1 / 1;
}

.elli-image--ratio-16x9 .elli-image__img,
.elli-image--ratio-4x3 .elli-image__img,
.elli-image--ratio-1x1 .elli-image__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.elli-image__button {
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: zoom-in;
}

.elli-image__button:focus-visible {
    outline: var(--jsd-elli-focus-ring-width, 3px) solid var(--jsd-elli-focus-ring-color, #0d6efd);
    outline-offset: var(--jsd-elli-focus-ring-offset, 3px);
    box-shadow: var(--jsd-elli-focus-ring-shadow, none);
}

.elli-image__zoom-hint {
    position: absolute;
    inset-inline-end: var(--elli-image-zoom-offset, 0.75rem);
    inset-block-end: var(--elli-image-zoom-offset, 0.75rem);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    padding-block: 0.35rem;
    padding-inline: 0.7rem;
    border-radius: var(--elli-image-zoom-border-radius, 999rem);
    color: var(--elli-image-zoom-color, #ffffff);
    background: var(--elli-image-zoom-background, rgba(17, 24, 39, 0.82));
    font-size: var(--elli-image-zoom-font-size, 0.875rem);
    line-height: 1.2;
    transform: translateY(0.25rem);
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

.elli-image__button:hover .elli-image__zoom-hint,
.elli-image__button:focus-visible .elli-image__zoom-hint {
    transform: translateY(0);
    opacity: 1;
}

.elli-image__caption {
    margin-block-start: var(--elli-image-caption-spacing, 0.625rem);
    color: var(--elli-image-caption-color, #4b5563);
    font-size: var(--elli-image-caption-font-size, 0.9375rem);
    line-height: var(--elli-image-caption-line-height, 1.5);
}

.elli-image-modal__content {
    overflow: hidden;
    border: 0;
    border-radius: var(--elli-image-modal-border-radius, 0.75rem);
    background: var(--elli-image-modal-background, #ffffff);
    color: var(--elli-image-modal-color, #111827);
}

.elli-image-modal__header {
    align-items: center;
    border-block-end: 1px solid var(--elli-image-modal-border-color, rgba(255, 255, 255, 0.18));
}

.elli-image-modal__title {
    margin: 0;
    font-size: var(--elli-image-modal-title-font-size, 1rem);
    font-weight: 700;
    line-height: 1.4;
}

.elli-image-modal__body {
    padding: var(--elli-image-modal-padding, 1rem);
}

.elli-image-modal__close{
    filter: var(--elli-image-modal-close-filter, invert(1) grayscale(100%) brightness(200%));
}

.elli-image-modal__caption {
    margin-block: var(--elli-image-caption-spacing, 0.625rem) 0;
    color: var(--elli-image-caption-color, #ffffff);
    font-size: var(--elli-image-caption-font-size, 0.9375rem);
    line-height: var(--elli-image-caption-line-height, 1.5);
}

.elli-image-modal__close:focus-visible {
    outline: var(--jsd-elli-focus-ring-width, 3px) solid var(--jsd-elli-focus-ring-color, #0d6efd);
    outline-offset: var(--jsd-elli-focus-ring-offset, 3px);
    box-shadow: var(--jsd-elli-focus-ring-shadow, none);
}

@media (max-width: 767.98px) {
    .elli-image {
        margin-block: var(--elli-image-margin-block-mobile, 1.25rem);
    }

    .elli-image__zoom-hint {
        opacity: 1;
        transform: none;
    }

    .elli-image-modal__body {
        padding: var(--elli-image-modal-padding-mobile, 0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .elli-image,
    .elli-image *,
    .elli-image-modal,
    .elli-image-modal * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}