/* @group Example
------------------------------------ */
html:has(.gallery) {
    --bodyBackground: var(--noir);
}

.gallery {
    position: relative;
    isolation: isolate;
}

.gallery .items .multimedia {
    height: fit-content;
}

.gallery[state=error] .items::before {

    color: var(--blossom);
    font-size: 1.8rem;

}

.gallery::before,
.gallery::after {
    content: '';
    position: absolute;
    z-index: -1;
}

.gallery::before {
    bottom: 0;
    left: 0;
    background-position: top right !important;
    bottom: -18rem;
}

.gallery::after {
    top: 0;
    right: 0;
    background-position: top left !important;
}

.gallery .filters .filter p {
    --fs: 1.5rem;
    --lh: 1.45em;
    --ls: .05em;
}

@media only screen and (min-width : 961px) {

    .gallery::before {
        background: url('../../img/patterns/gallery/deco-left.png');
        width: 45.1rem;
        height: 132.2rem;
        background-size: contain;
    }

    .gallery::after {
        background: url('../../img/patterns/gallery/deco-right.png');
        width: 68.9rem;
        height: 196.7rem;
        background-size: contain;
    }

    .gallery .filter:not(:last-child) {
        border-right: none !important;
    }

    .gallery[state=error] .items::before {
        margin-left: calc((1 / 12) * 100%);
        translate: calc(var(--gap-desktop) * 0.5);
    }

    .gallery .filters .filter {
        translate: calc(var(--gap-desktop) * 0.5);
    }

    .gallery .filters .filter:first-of-type {
        /* margin-left: calc((1 / 12) * 100%); */
    }

    .gallery .filters .filter {
        width: 17.1rem;
        height: 4rem;
    }

    .gallery .filters .filter p {
        translate: 0 0.25rem;
    }

    .gallery .items .item {
        flex: 0 1 calc((var(--cols, 12) / 12) * 100%);
        margin-left: calc((var(--m-left, 0) / 12) * 100%);
        margin-right: calc((var(--m-right, 0) / 12) * 100%);
        padding-inline: calc(var(--gap-desktop) * 0.5);
    }

    .gallery .items .item img {
        height: var(--img-h);
    }

    .gallery .items .item figcaption {
        margin-top: 2.4rem;
        color: var(--blossom);
    }

    .gallery .items .item:nth-child(8n+1 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+1) {
        --cols: 7;
        --m-left: 1;
        --img-h: 61.5rem;
        margin-top: 1.5rem;
    }

    .gallery .items .item:nth-child(8n+2 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+2) {
        --cols: 5;
        --m-left: 7;
        --img-h: 40.4rem;
        margin-top: 4.3rem;
    }

    .gallery .items .item:nth-child(8n+3 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+3) {
        --cols: 5;
        margin-top: -11.5rem;
        --m-right: 7;
        --img-h: 43.4rem;
    }

    .gallery .items .item:nth-child(8n+4 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+4) {
        --cols: 5;
        --m-right: 1;
        --m-left: 6;
        margin-top: -26.8rem;

        --img-h: 36.3rem;
    }

    .gallery .items .item:nth-child(8n+5 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+5) {
        --cols: 5;
        --m-left: 1;
        margin-top: 4.36rem;

        --img-h: 42.8rem;
    }

    .gallery .items .item:nth-child(8n+6 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+6) {
        --cols: 5;
        --m-left: 7;
        margin-top: -22.5rem;

        --img-h: 34.2rem;
    }

    .gallery .items .item:nth-child(8n+7 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+7) {
        --cols: 8;
        --m-rigth: 4;
        margin-top: 4.33rem;

        --img-h: 50.1rem;
    }

    .gallery .items .item:nth-child(8n+8 of .active),
    .editor-styles-wrapper .gallery .item:nth-child(8n+8) {
        --cols: 7;
        --m-right: 1;
        --m-left: 4;
        margin-top: 4.3rem;

        --img-h: 55.3rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .gallery::before {
        background: url('../../img/patterns/gallery/deco-left-m.png');
        width: 32.5rem;
        height: 94.3rem;
        background-size: contain;
    }

    .gallery::after {
        background: url('../../img/patterns/gallery/deco-right-m.png');
        width: 22.7rem;
        height: 79.6rem;
        background-size: contain;
    }

    .gallery .filters p {
        line-height: 1em;
        translate: 0 0.4rem;
    }



    .gallery .filters :is([collapse-header], [collapse-list]) {
        background: var(--blossom);
        color: var(--noir);
    }

    .gallery .filters header[collapse-header] {
        width: 100%;
        justify-content: center;
        padding-block: 1.5rem;
        gap: 1.5rem;
        color: var(--noir);
    }

    .gallery .filters [collapse-header] i {
        color: var(--scarlet);
        font-size: 1.4rem;
    }

    .gallery .filters [collapse-list] {
        width: calc(100% - var(--_row-extra-pad));
    }

    .gallery .filters [collapse-list] button {
        justify-content: center;
        margin-bottom: 1.5rem;
        align-items: center;
        width: 100%;
    }

    .gallery .filters button p {
        color: var(--noir);
    }

    .gallery .filters [collapse-list] button.active {
        display: none;
    }

    .gallery .item figcaption {
        display: none;
    }

    .gallery .item :is(.multimedia, img) {
        height: 100%;
    }

    .gallery .items .item:nth-child(8n+1 of .active),
    .gallery .items .item:nth-child(8n+1 of .active) {
        flex: 0 1 100%;
        height: 27.9rem;
    }

    .gallery .items .item:nth-child(8n+2 of .active),
    .gallery .items .item:nth-child(8n+3 of .active),
    .gallery .items .item:nth-child(8n+5 of .active),
    .gallery .items .item:nth-child(8n+6 of .active) {
        flex: 0 1 calc(50% - (var(--gap-mobile) * 0.5));
        height: 13.3rem;
    }

    .gallery .items .item:nth-child(8n+4 of .active),
    .gallery .items .item:nth-child(8n+8 of .active) {
        margin-left: auto;
        height: 19.2rem;
        width: 31rem;
    }

}

/* @end */

/* OVERLAY */
[data-comp="gallery"]#overlay {
    --backdrop-color: #121212e0;
    --text-color: var(--blossom);
    --bttn-color: var(--blossom);
}

[data-comp="gallery"]#overlay .splide {
    padding-bottom: var(--bttn-size);
}



[data-comp="gallery"]#overlay .splide__arrows>* {
    padding: 0;
}

[data-comp="gallery"]#overlay .splide__arrows .text {
    line-height: 1.5em;
}

[data-comp="gallery"]#overlay #close-dialog {
    rotate: 45deg;
}

[data-comp="gallery"]#overlay .splide__arrow:disabled {
    opacity: 0.5;
}

@media only screen and (min-width : 961px) {
    [data-comp="gallery"]#overlay {
        --bttn-size: 4.5rem;
        --arrow-size: 1.4rem;
    }

    [data-comp="gallery"]#overlay .splide__arrows {
        bottom: 0;
        top: unset;
        padding: 0;
        translate: -50% 0;
    }


}

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

    [data-comp="gallery"]#overlay {
        --max-width: none;
        --gap-mobile: 2rem;
    }

    [data-comp="gallery"]#overlay :is(.row, #important) {
        justify-content: center;
    }

    [data-comp="gallery"]#overlay .splide__arrow {
        opacity: 0.3;
    }

    [data-comp="gallery"]#overlay .splide {
        padding: 0;
        max-height: 70dvh;
    }
    [data-comp="gallery"]#overlay :is(header, #important) {
        position: relative;
    }

    [data-comp="gallery"]#overlay :is(.splide__slide, #important){
        height: 90%;
        width: 100%;
    }

    [data-comp="gallery"]#overlay .splide__slide img{
        object-fit: contain;
    }
}