@import 'lib/photoswipe.css';

ids-gallery, .ids__gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5em;


    figure {
        flex: 0 0 5em;

        &:focus-within:has(a:focus-visible) {
            outline: 2px solid rgb(var(--ids__link-RGB));
            outline-offset: 2px;
        }

        a:hover, a:focus-visible {
            opacity: 0.9;
        }

        img {
            object-fit: contain;
            max-height: 100%;
            max-width: 100%;
        }

        figcaption {
            margin-right: -25%;
        }
    }
}

/* PhotoSwipe lightbox caption */
.pswp .pswp__caption {
    position: absolute;
    display: grid;
    left: 0;
    right: 0;
    bottom: calc(var(--ids__density, 1.5) * 1em);

    figcaption {
        place-self: center;
        color: rgb(var(--ids__background-RGB));
        background: rgba(var(--ids__text-RGB), 0.8);
        font-size: 0.8em;
        line-height: var(--ids__density, 1.5);
        padding: 0.4em 0.8em;
        text-align: center;
        max-width: 80%;

        a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 0.15em;

            &:hover {
                opacity: 0.7;
            }
        }
    }


}