/*
    CSS Guide to Grid
    https://css-tricks.com/snippets/css/complete-guide-grid/
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
*/


@supports (display:grid) {
    [data-unit="photo-slider"] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 50px;
        gap: 20px;
        grid-auto-rows: minmax(200px, auto);
        text-align: center;
        padding: 10px;
        align-items: flex-end;
    }
}

/* added for supporting IE10+ (2021-08-27) */
/*@supports not (display:grid) { */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    [data-unit="photo-slider"] {
        display: flex;
        flex-flow: wrap;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    [data-unit="photo-slider"] > div[data-seq] {
        text-align: center;
        /*padding: 2rem;*/
        margin: 0 2rem;
    }

    [data-unit="photo-slider"] > div[data-seq] img {
        min-width: 200px;
    }

    @media screen and (max-width: 920px) {
        [data-unit="photo-slider"] {
            flex-wrap: wrap;
        }

        [data-unit="photo-slider"] > div[data-seq] {
            width: 100%;
            order: 1;
        }

        [data-unit="photo-slider"] > div[data-seq] img {
            width: 100%;
            min-width: auto;
        }
    }
    
    @media screen and (min-width: 961px) {
        [data-unit="photo-slider"] > div[data-seq] {
            width: 50%;
        }
    }

    @media screen and (min-width: 1201px) {
        [data-unit="photo-slider"] > div[data-seq] {
            width: 33.3333%;
        }
    }

    @media screen and (min-width: 1601px) {
        [data-unit="photo-slider"] > div[data-seq] {
            width: 25%;
        }
    }    
}

[data-unit="photo-slider"] > div[data-seq] {
    cursor: zoom-in !important;
    margin-bottom: 1rem;
}

[data-unit="photo-slider"] > div[data-seq] img {
    filter: drop-shadow(0.3rem -0.3rem 0.1rem rgba(64, 64, 64, 0.2));        
    transition: .5s;
    opacity: 0.9;
}

[data-unit="photo-slider"] > div[data-seq]:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
}

[data-unit="photo-slider"] p {
    margin-bottom: 0;
}

[data-unit="photo-slider"] span.caption_date {
    color: darkslateblue;
    font-weight: bolder;
    font-size: .8rem;
}

.pswp__caption [data-unit="tag-link"] {
    color: cadetblue;
}

.pswp__caption [data-unit="show-all"] {
    color: aqua;
}

[data-unit="category-description"] {
	padding-left: 1.3rem;
	margin-bottom: 1.5rem;
}