@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: var(--ids__border-width-m) solid var(--ids__link);
            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: var(--ids__background);
        background: color-mix(in srgb, var(--ids__text) 80%, transparent);
        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;
            }
        }
    }


}