@import 'lib/photoswipe.css';

ids-gallery, .ids__gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
    --columns: 3;
    --gap: 1em;
    gap: var(--gap);
    place-content: start;

    @media screen and (max-width: 768px) {
        --gap: 0.4em;
    } 

    figure {
        flex: 0 0 calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
        overflow: hidden;

        &: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%;
        }

        &.L {
            --module-width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
            flex: 0 0 calc((var(--module-width) * 2) + var(--gap));
        }
        &.XL {
            
            flex: 0 0 100%;
        }
    }
}