.fd-custom-media-gallery {
    --fd-gallery-gap: 16px;
    --fd-masonry-row: 8px;
    display: grid;
    grid-template-columns: repeat(var(--fd-gallery-columns, 3), minmax(0, 1fr));
    grid-auto-rows: var(--fd-masonry-row);
    grid-auto-flow: dense;
    gap: var(--fd-gallery-gap);
    width: 100%;
    align-items: start;
}

.fd-custom-media-gallery__item {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #000;
    border-radius: 4px;
}

.fd-custom-media-gallery__item.is-image {
    background: transparent;
}

.fd-custom-media-gallery__item a,
.fd-custom-media-gallery__item img,
.fd-custom-media-gallery__item video {
    display: block;
    width: 100% !important;
    max-width: 100%;
}

.fd-custom-media-gallery__item img,
.fd-custom-media-gallery__item video {
    height: auto !important;
}

.fd-custom-media-gallery__item.is-video,
.fd-custom-media-gallery__item.is-video video {
    background: #000;
}

.fd-custom-media-gallery__video {
    object-fit: contain;
}

/* Prevent old WordPress MediaElement styles from affecting cached markup. */
.fd-custom-media-gallery__item .wp-video,
.fd-custom-media-gallery__item .mejs-container,
.fd-custom-media-gallery__item .mejs-mediaelement,
.fd-custom-media-gallery__item .mejs-inner {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1024px) {
    .fd-custom-media-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fd-custom-media-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
}