.bdmg-gallery {
    --bdmg-row: 4px;
    --bdmg-gap-active: var(--bdmg-gap);
    width: 100%;
}

.bdmg-gallery__grid {
    display: grid;
    grid-template-columns: repeat(var(--bdmg-columns), minmax(0, 1fr));
    gap: var(--bdmg-gap-active);
    align-items: start;
}

.bdmg-gallery.bdmg-gallery--masonry .bdmg-gallery__grid {
    grid-auto-rows: var(--bdmg-row);
}

.bdmg-gallery__item {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #f5f1ea;
}

.bdmg-gallery__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bdmg-gallery__image {
    display: block;
    width: 100%;
    height: auto;
}

.bdmg-gallery__link:focus-visible {
    outline: 3px solid #8c1d2d;
    outline-offset: 3px;
}

@media (max-width: 980px) {
    .bdmg-gallery {
        --bdmg-gap-active: var(--bdmg-gap-tablet);
    }

    .bdmg-gallery__grid {
        grid-template-columns: repeat(var(--bdmg-columns-tablet), minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .bdmg-gallery {
        --bdmg-gap-active: var(--bdmg-gap-phone);
    }

    .bdmg-gallery__grid {
        grid-template-columns: repeat(var(--bdmg-columns-phone), minmax(0, 1fr));
    }
}

.bdmg-lightbox {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: #fff;
}

.bdmg-lightbox::backdrop {
    background: rgba(18, 15, 12, 0.88);
}

.bdmg-lightbox__figure {
    display: grid;
    gap: 12px;
    place-items: center;
    margin: 0;
}

.bdmg-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 104px);
    width: auto;
    height: auto;
    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.36);
}

.bdmg-lightbox__caption {
    max-width: min(880px, 100%);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.bdmg-lightbox__button {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 50%;
    background: rgba(18, 15, 12, 0.74);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
}

.bdmg-lightbox__button:hover,
.bdmg-lightbox__button:focus-visible {
    background: rgba(140, 29, 45, 0.94);
    outline: none;
}

.bdmg-lightbox__close {
    top: -54px;
    right: 0;
    font-size: 34px;
}

.bdmg-lightbox__prev {
    top: 50%;
    left: -62px;
    transform: translateY(-50%);
}

.bdmg-lightbox__next {
    top: 50%;
    right: -62px;
    transform: translateY(-50%);
}

body.bdmg-lightbox-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .bdmg-lightbox {
        width: calc(100vw - 24px);
    }

    .bdmg-lightbox__image {
        max-height: calc(100vh - 132px);
    }

    .bdmg-lightbox__close {
        top: -52px;
    }

    .bdmg-lightbox__prev,
    .bdmg-lightbox__next {
        top: auto;
        bottom: -56px;
        transform: none;
    }

    .bdmg-lightbox__prev {
        left: 0;
    }

    .bdmg-lightbox__next {
        right: 0;
    }
}