:root {
    --gallerygap: 1rem;
}

@media screen and (max-width: 768px) {
    :root {
        --gallerygap: 0.5rem;
    }
}

[data-gap="no"] {
    --gallerygap: 0px;
}

div.my_gallery *,
div.my_masonry *,
div.my_carousel * {
    box-sizing: border-box;
}

div.my_gallery figure,
div.my_masonry figure,
div.my_carousel figure,
div.my_gallery figcaption,
div.my_masonry figcaption,
div.my_carousel figcaption {
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

div.my_gallery figure a,
div.my_masonry figure a,
div.my_carousel figure a {
    display: block;
    margin: 0;
    padding: 0;
}

div.my_gallery figcaption,
div.my_masonry figcaption,
div.my_carousel figcaption {
    background: linear-gradient(0deg, rgba(25, 25, 25, .75), rgba(0, 0, 0, .3) 50%, transparent);
    bottom: 0;
    color: #fff;
    font-size: smaller;
    font-family: inherit;
    left: 0;
    max-height: 50%;
    padding: 20px 8px 10px 8px;
    position: absolute;
    text-align: center;
    width: 100%;
    pointer-events: none;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

div.my_gallery figcaption a,
div.my_masonry figcaption a,
div.my_carousel figcaption a {
    pointer-events: visible;
    display: block;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

div.my_gallery figcaption a:after,
div.my_masonry figcaption a:after,
div.my_carousel figcaption a:after {
    content: " >";
}

div.my_gallery img,
div.my_masonry img,
div.my_carousel img {
    max-width: 100%;
}

div.my_gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallerygap);
    clear: both;
    justify-content: left;
}

div.my_masonry {
    -webkit-column-gap: var(--gallerygap);
    -moz-column-gap: var(--gallerygap);
    column-gap: var(--gallerygap);
}

div.my_masonry figure {
    width: 100% !important;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: var(--gallerygap);
}

[data-fullwidth="1"] {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}