#content {
    flex: 1;
}

#photos {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem 0;
}

#photos > div {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -2px;
}

#photos > div > div {
    flex: 0 0 33.3333%;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    padding: 2px;
    position: relative;
    cursor: pointer;
	-webkit-transition: all 1s ease; /* Safari et Chrome */
	-moz-transition: all 1s ease; /* Firefox */
	-ms-transition: all 1s ease; /* Internet Explorer 9 */
	-o-transition: all 1s ease; /* Opera */
	transition: all 1s ease;
}

#photos > div > div > img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 100%;
}


#photos > div > div:hover {
    opacity: 0.8;
	-webkit-transform:scale(0.85); /* Safari et Chrome */
	-moz-transform:scale(0.85); /* Firefox */
	-ms-transform:scale(0.85); /* Internet Explorer 9 */
	-o-transform:scale(0.85); /* Opera */
	transform:scale(0.85);
}

#photos button {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    font-size: 4rem;
    outline: none;
    box-shadow: 0 0 0;
    cursor: pointer;
    border: 0;
    opacity: 0.8;
}

/* ==============================================================================
= MODAL
=============================================================================== */
#modal-photo {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 1);
    z-index: 1;
    align-items: safe center;
    justify-content: center;
    padding: 2rem 0;
    box-sizing: border-box;
    display: flex;
    opacity: 0;
    overflow: auto;
    z-index: -2;
}

#modal-photo .col > div {
    color: #fff;
    padding: 2rem;
    box-sizing: border-box;
    /*position: relative;
    transform: scale(0);*/
    background: transparent;
    border: 0;
    padding: 0;
}

#modal-photo h1 {
    margin: 0 0 1rem;
    padding: 0 2rem 0 0;
    font-size: 1.6rem;
}

#modal-photo .btn-close {
    background: none;
    border: 0;
    box-shadow: 0 0 0;
    outline: none;
    color: #fff;
    font-size: 2rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
}

#modal-photo .btn-close:hover {
    color: rgba(255, 255, 255, 0.7);
}

#modal-photo .splide__slide img {
    max-height: 80vh;
    max-width: 100%;
    display: block;
    margin: auto;
}

#modal-photo .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-photo #link-download {
    display: inline-block;
    right: 1rem;
    bottom: 1rem;
    position: absolute;
    text-decoration: none;
    font-size: 1.2rem;
    color: #fff;
    outline: none;
}

#modal-photo #counter-photos {
    font-weight: 100;
    display: inline-block;
    left: 1rem;
    bottom: 1rem;
    position: absolute;
}


@media (max-width: 960px) {
    #photos > div > div {
        flex: 0 0 50%;
    }
}
@media (max-width: 720px) {
    #photos > div > div {
        flex: 0 0 100%;
        max-width: 500px;
        margin: auto;
    }
}