:root {
    --gallerygap: 1rem;
}

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

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

@media screen and (min-width: 1024px) {
    div.my_gallery[data-desktop="2"] > div {
        width: calc((100% - (1 * var(--gallerygap))) / 2);
    }

    div.my_gallery[data-desktop="3"] > div {
        width: calc((100% - (2 * var(--gallerygap))) / 3);
    }

    div.my_gallery[data-desktop="4"] > div {
        width: calc((100% - (3 * var(--gallerygap))) / 4);
    }

    div.my_gallery[data-desktop="5"] > div {
        width: calc((100% - (4 * var(--gallerygap))) / 5);
    }

    div.my_gallery[data-desktop="6"] > div {
        width: calc((100% - (5 * var(--gallerygap))) / 6);
    }

    div.my_gallery[data-desktop="7"] > div {
        width: calc((100% - (6 * var(--gallerygap))) / 7);
    }

    div.my_gallery[data-desktop="8"] > div {
        width: calc((100% - (7 * var(--gallerygap))) / 8);
    }

    div.my_gallery[data-desktop="9"] > div {
        width: calc((100% - (8 * var(--gallerygap))) / 9);
    }

    div.my_masonry[data-desktop="2"] {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    div.my_masonry[data-desktop="3"] {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    div.my_masonry[data-desktop="4"] {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }

    div.my_masonry[data-desktop="5"] {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }

    div.my_masonry[data-desktop="6"] {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }

    div.my_masonry[data-desktop="7"] {
        -moz-column-count: 7;
        -webkit-column-count: 7;
        column-count: 7;
    }

    div.my_masonry[data-desktop="8"] {
        -moz-column-count: 8;
        -webkit-column-count: 8;
        column-count: 8;
    }

    div.my_masonry[data-desktop="9"] {
        -moz-column-count: 9;
        -webkit-column-count: 9;
        column-count: 9;
    }
}

@media screen and (min-width: 481px) and (max-width: 1023px) {
    div.my_gallery[data-tablet="2"] > div {
        width: calc((100% - (1 * var(--gallerygap))) / 2);
    }

    div.my_gallery[data-tablet="3"] > div {
        width: calc((100% - (2 * var(--gallerygap))) / 3);
    }

    div.my_gallery[data-tablet="4"] > div {
        width: calc((100% - (3 * var(--gallerygap))) / 4);
    }

    div.my_gallery[data-tablet="5"] > div {
        width: calc((100% - (4 * var(--gallerygap))) / 5);
    }

    div.my_gallery[data-tablet="6"] > div {
        width: calc((100% - (5 * var(--gallerygap))) / 6);
    }

    div.my_gallery[data-tablet="7"] > div {
        width: calc((100% - (6 * var(--gallerygap))) / 7);
    }

    div.my_gallery[data-tablet="8"] > div {
        width: calc((100% - (7 * var(--gallerygap))) / 8);
    }

    div.my_gallery[data-tablet="9"] > div {
        width: calc((100% - (8 * var(--gallerygap))) / 9);
    }

    div.my_masonry[data-tablet="2"] {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    div.my_masonry[data-tablet="3"] {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    div.my_masonry[data-tablet="4"] {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }

    div.my_masonry[data-tablet="5"] {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }

    div.my_masonry[data-tablet="6"] {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }

    div.my_masonry[data-tablet="7"] {
        -moz-column-count: 7;
        -webkit-column-count: 7;
        column-count: 7;
    }

    div.my_masonry[data-tablet="8"] {
        -moz-column-count: 8;
        -webkit-column-count: 8;
        column-count: 8;
    }

    div.my_masonry[data-tablet="9"] {
        -moz-column-count: 9;
        -webkit-column-count: 9;
        column-count: 9;
    }
}

@media screen and (max-width: 480px) {
    div.my_gallery[data-mobile="2"] > div {
        width: calc((100% - (1 * var(--gallerygap))) / 2);
    }

    div.my_gallery[data-mobile="3"] > div {
        width: calc((100% - (2 * var(--gallerygap))) / 3);
    }

    div.my_gallery[data-mobile="4"] > div {
        width: calc((100% - (3 * var(--gallerygap))) / 4);
    }

    div.my_gallery[data-mobile="5"] > div {
        width: calc((100% - (4 * var(--gallerygap))) / 5);
    }

    div.my_gallery[data-mobile="6"] > div {
        width: calc((100% - (5 * var(--gallerygap))) / 6);
    }

    div.my_gallery[data-mobile="7"] > div {
        width: calc((100% - (6 * var(--gallerygap))) / 7);
    }

    div.my_gallery[data-mobile="8"] > div {
        width: calc((100% - (7 * var(--gallerygap))) / 8);
    }

    div.my_gallery[data-mobile="9"] > div {
        width: calc((100% - (8 * var(--gallerygap))) / 9);
    }

    div.my_masonry[data-mobile="2"] {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    div.my_masonry[data-mobile="3"] {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    div.my_masonry[data-mobile="4"] {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }

    div.my_masonry[data-mobile="5"] {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }

    div.my_masonry[data-mobile="6"] {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }

    div.my_masonry[data-mobile="7"] {
        -moz-column-count: 7;
        -webkit-column-count: 7;
        column-count: 7;
    }

    div.my_masonry[data-mobile="8"] {
        -moz-column-count: 8;
        -webkit-column-count: 8;
        column-count: 8;
    }

    div.my_masonry[data-mobile="9"] {
        -moz-column-count: 9;
        -webkit-column-count: 9;
        column-count: 9;
    }
}

[data-round="4"] figure {
    border-radius: 4px;
}

[data-round="8"] figure {
    border-radius: 8px;
}

[data-round="12"] figure {
    border-radius: 12px;
}

[data-round="16"] figure {
    border-radius: 16px;
}

[data-round="20"] figure {
    border-radius: 20px;
}

[data-round="24"] figure {
    border-radius: 24px;
}

[data-round="28"] figure {
    border-radius: 28px;
}

[data-round="32"] figure {
    border-radius: 32px;
}

[data-round="36"] figure {
    border-radius: 36px;
}

[data-round="40"] figure {
    border-radius: 40px;
}

[data-round="44"] figure {
    border-radius: 44px;
}

[data-round="48"] figure {
    border-radius: 48px;
}

[data-round="52"] figure {
    border-radius: 52px;
}

[data-round="56"] figure {
    border-radius: 56px;
}

[data-round="60"] figure {
    border-radius: 60px;
}

[data-round="64"] figure {
    border-radius: 64px;
}