.dwn-image-gallery {
    --dwn-grid-columns: 4;
    --dwn-column-gap: 14px;
    --dwn-row-gap: 14px;
    --dwn-carousel-gap: 14px;
    --dwn-image-width: 100%;
    --dwn-image-height: 205px;
    box-sizing: border-box;
    max-width: 100%;
}

.dwn-image-gallery *,
.dwn-image-gallery *::before,
.dwn-image-gallery *::after {
    box-sizing: border-box;
}

.dwn-image-gallery-track {
    width: 100%;
    outline: none;
}

.dwn-image-layout-showcase .dwn-image-gallery-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--dwn-image-height);
    column-gap: var(--dwn-column-gap);
    row-gap: var(--dwn-row-gap);
}

.dwn-image-layout-equal .dwn-image-gallery-track {
    display: grid;
    grid-template-columns: repeat(var(--dwn-grid-columns), minmax(0, 1fr));
    column-gap: var(--dwn-column-gap);
    row-gap: var(--dwn-row-gap);
}

.dwn-image-gallery-item {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.dwn-image-layout-showcase .dwn-image-gallery-item {
    grid-column: var(--dwn-grid-column);
    grid-row: var(--dwn-grid-row);
    align-self: stretch;
    min-height: 0;
    height: 100%;
}

.dwn-image-layout-equal .dwn-image-gallery-item {
    height: var(--dwn-image-height);
}

.dwn-image-layout-showcase .dwn-image-gallery-item--tall,
.dwn-image-layout-showcase .dwn-image-gallery-item--tall .dwn-image-gallery-link,
.dwn-image-layout-showcase .dwn-image-gallery-item--tall .dwn-image-gallery-media {
    height: 100%;
    min-height: 0;
}

.dwn-image-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.dwn-image-gallery-media {
    display: block;
    width: var(--dwn-image-width);
    height: 100%;
    min-height: 0;
    margin-inline: auto;
    overflow: hidden;
    background-color: #eaf2f8;
    border-radius: 15px;
    transition-property: border-color, box-shadow, background-color, transform;
    transition-duration: 0.35s;
    transition-timing-function: ease;
}

.dwn-image-gallery-image {
    display: block;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    transform: scale(1);
    transition-property: transform, opacity, filter;
    transition-duration: 0.35s;
    transition-timing-function: ease;
}

/*
 * WordPress themes and Elementor can apply `height: auto` to images globally.
 * Only the sizing declarations use a stronger selector so Elementor's object-fit,
 * object-position, opacity, and hover controls continue to override defaults.
 */
.dwn-image-gallery .dwn-image-gallery-media > img.dwn-image-gallery-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

.dwn-image-gallery-navigation {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 18px;
}

.dwn-image-gallery-arrow {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: #001a44;
    border: 0;
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.dwn-image-gallery-arrow:hover {
    transform: translateY(-1px);
}

.dwn-image-gallery-arrow:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
}

.dwn-image-gallery-arrow:focus-visible,
.dwn-image-gallery-dot:focus-visible,
.dwn-image-gallery-track:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.dwn-image-gallery-arrow svg {
    display: block;
    width: 18px;
    height: 18px;
}

.dwn-image-gallery-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dwn-image-gallery-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    background-color: #b8c8d8;
    border: 0;
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.dwn-image-gallery-dot.is-active {
    width: 24px;
    background-color: #1485b3;
}

.dwn-image-gallery.dwn-carousel-active {
    overflow: hidden;
}

.dwn-image-gallery.dwn-carousel-active .dwn-image-gallery-track {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    column-gap: var(--dwn-carousel-gap) !important;
    row-gap: 0 !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

.dwn-image-gallery.dwn-carousel-active .dwn-image-gallery-track::-webkit-scrollbar {
    display: none;
}

.dwn-image-gallery.dwn-carousel-active .dwn-image-gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
    height: var(--dwn-image-height) !important;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.dwn-image-gallery.dwn-carousel-tablet .dwn-image-gallery-item {
    flex: 0 0 calc((100% - var(--dwn-carousel-gap)) / 2);
    width: calc((100% - var(--dwn-carousel-gap)) / 2);
}

.dwn-image-gallery.dwn-carousel-mobile .dwn-image-gallery-item {
    flex: 0 0 100%;
    width: 100%;
}

.dwn-image-gallery.dwn-carousel-active .dwn-image-gallery-navigation {
    display: flex;
}

.dwn-image-gallery.dwn-carousel-active[data-show-arrows="yes"] .dwn-image-gallery-arrow {
    display: inline-flex;
}

.dwn-image-gallery.dwn-carousel-active[data-show-dots="yes"] .dwn-image-gallery-dots {
    display: flex;
}

.dwn-image-gallery.dwn-carousel-no-overflow .dwn-image-gallery-navigation {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dwn-image-gallery-track,
    .dwn-image-gallery-media,
    .dwn-image-gallery-image,
    .dwn-image-gallery-arrow,
    .dwn-image-gallery-dot {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}