:root {
    --gallerygap: 1rem;
}

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

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

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

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

div.my_gallery figcaption,
div.my_mansory figcaption,
div.my_carousel figcaption {
    background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 70%, transparent);
    bottom: 0;
    color: #fff;
    font-size: smaller;
    left: 0;
    max-height: 60%;
    overflow: hidden;
    padding: 0 8px 8px;
    position: absolute;
    text-align: center;
    width: 100%;
    pointer-events: none;
}

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

figcaption a:after {
    content: " >";
}

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

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

div.my_gallery figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 30px 20px 10px !important;
    color: #fff;
    text-align: center;
    font-size: smaller;
    background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 70%, transparent);
    margin: 0;
    z-index: 100;
}

div.my_gallery.column-2 > div {
    width: calc((100% - (1 * var(--gallerygap))) / 2)
}

div.my_gallery.column-3 > div {
    width: calc((100% - (2 * var(--gallerygap))) / 3)
}

div.my_gallery.column-4 > div {
    width: calc((100% - (3 * var(--gallerygap))) / 4)
}

div.my_gallery.column-5 > div {
    width: calc((100% - (4 * var(--gallerygap))) / 5)
}

div.my_gallery.column-6 > div {
    width: calc((100% - (5 * var(--gallerygap))) / 6)
}

div.my_gallery.column-7 > div {
    width: calc((100% - (6 * var(--gallerygap))) / 7)
}

div.my_gallery.column-8 > div {
    width: calc((100% - (7 * var(--gallerygap))) / 8)
}

div.my_gallery.column-9 > div {
    width: calc((100% - (8 * var(--gallerygap))) / 9)
}

@media screen and (min-width: 768px) and (max-width:1024px) {

    div.my_gallery.column-4 > div,
    div.my_gallery.column-5 > div {
        width: calc((100% - (2 * var(--gallerygap))) / 3)
    }

    div.my_gallery.column-6 > div,
    div.my_gallery.column-7 > div {
        width: calc((100% - (3 * var(--gallerygap))) / 4)
    }

    div.my_gallery.column-8 > div,
    div.my_gallery.column-9 > div {
        width: calc((100% - (4 * var(--gallerygap))) / 5)
    }
}

@media screen and (min-width: 480px) and (max-width:767px) {

    div.my_gallery.column-4 > div,
    div.my_gallery.column-5 > div {
        width: calc((100% - (2 * var(--gallerygap))) / 3)
    }

    div.my_gallery.column-6 > div,
    div.my_gallery.column-7 > div {
        width: calc((100% - (3 * var(--gallerygap))) / 4)
    }

    div.my_gallery.column-8 > div,
    div.my_gallery.column-9 > div {
        width: calc((100% - (4 * var(--gallerygap))) / 5)
    }
}

@media screen and (max-width: 479px) {

    div.my_gallery.column-2 > div,
    div.my_gallery.column-3 > div {
        width: 100%;
    }

    div.my_gallery.column-4 > div,
    div.my_gallery.column-5 > div,
    div.my_gallery.column-6 > div,
    div.my_gallery.column-7 > div {
        width: calc((100% - (1 * var(--gallerygap))) / 2)
    }

    div.my_gallery.column-8 > div,
    div.my_gallery.column-9 > div {
        width: calc((100% - (2 * var(--gallerygap))) / 3)
    }
}

/* === MANSORY === */
div.my_mansory {
    -webkit-column-gap: var(--gallerygap);
    -moz-column-gap: var(--gallerygap);
    column-gap: var(--gallerygap);
}

div.my_mansory figure {
    display: block;
    overflow: hidden;
    width: 100% !important;
    padding: 0;
    position: relative;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: var(--gallerygap);
}

div.my_mansory.mansory-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

div.my_mansory.mansory-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

div.my_mansory.mansory-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
}

div.my_mansory.mansory-5 {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
}

div.my_mansory.mansory-6 {
    -moz-column-count: 6;
    -webkit-column-count: 6;
    column-count: 6;
}

div.my_mansory.mansory-7 {
    -moz-column-count: 7;
    -webkit-column-count: 7;
    column-count: 7;
}

div.my_mansory.mansory-8 {
    -moz-column-count: 8;
    -webkit-column-count: 8;
    column-count: 8;
}

div.my_mansory.mansory-9 {
    -moz-column-count: 9;
    -webkit-column-count: 9;
    column-count: 9;
}

@media screen and (min-width: 768px) and (max-width:1024px) {
    div.my_mansory.mansory-4 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    div.my_mansory.mansory-5,
    div.my_mansory.mansory-6 {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }

    div.my_mansory.mansory-7,
    div.my_mansory.mansory-8,
    div.my_mansory.mansory-9 {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media screen and (min-width: 480px) and (max-width:767px) {
    div.my_mansory.mansory-4 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    div.my_mansory.mansory-5 {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    div.my_mansory.mansory-6,
    div.my_mansory.mansory-7,
    div.my_mansory.mansory-8,
    div.my_mansory.mansory-9 {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media screen and (max-width: 479px) {

    div.my_mansory.mansory-2,
    div.my_mansory.mansory-3 {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

    div.my_mansory.mansory-4,
    div.my_mansory.mansory-5,
    div.my_mansory.mansory-6,
    div.my_mansory.mansory-7,
    div.my_mansory.mansory-8,
    div.my_mansory.mansory-9 {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

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

.round-4 figure {
    border-radius: 4px;
}

.round-8 figure {
    border-radius: 8px;
}

.round-12 figure {
    border-radius: 12px;
}

.round-16 figure {
    border-radius: 16px;
}

.round-20 figure {
    border-radius: 20px;
}

.round-24 figure {
    border-radius: 24px;
}

.round-28 figure {
    border-radius: 28px;
}

.round-32 figure {
    border-radius: 32px;
}

.round-36 figure {
    border-radius: 36px;
}

.round-40 figure {
    border-radius: 40px;
}

.round-44 figure {
    border-radius: 44px;
}

.round-48 figure {
    border-radius: 48px;
}

.round-52 figure {
    border-radius: 52px;
}

.round-56 figure {
    border-radius: 56px;
}

.round-60 figure {
    border-radius: 60px;
}

.round-64 figure {
    border-radius: 64px;
}