div.PhotoContainer { border: 1px solid #397100; background-color: white; padding-top: 10px; padding-left: 10px; box-shadow:rgba(0,0,0,0.1) 5px 5px 10px;
					 border-radius:3px;
}



div.PhotoContainer {display:flex; flex-wrap:wrap}

div.PhotoContainer > a.Album {border:1px solid #6C0; flex-basis:200px; margin-right:10px; margin-bottom:10px; background:linear-gradient(to top, rgba(0,0,0,0.1), rgba(102,204,0,0.2));}

div.PhotoContainer > a.Album > .album-cover {height:200px; background-size:cover; background-position:center center}
div.PhotoContainer > a.Album > * {text-align:center;}
div.PhotoContainer > a.Album > *:not(.album-cover) {padding:5px;}
div.PhotoContainer > a.Album > .album-name {font-size:15px}
div.PhotoContainer > a.Album > .num-photos {font-size:12px}



div.PhotoContainer[data-album-open] {padding-right:8px; padding-bottom:8px}
div.PhotoContainer[data-album-open] > .Photo {height:150px; flex-basis:150px; margin-right:2px; margin-bottom:2px; background-size:cover; background-position:center center}
div.PhotoContainer[data-album-open] > h1 {flex-basis:100%; margin-right:2px; font-size:22px; padding-bottom:5px; border-bottom:1px solid #6C0; margin-bottom:10px;}

div.PhotoContainer[data-album-open] > h1 > * {color:#397100}
div.PhotoContainer[data-album-open] > h1 > a::after {content:' > '}
div.PhotoContainer[data-album-open] > h1 > a:hover {color:#6C0}


@media screen and (max-width:600px)
{
	div.PhotoContainer > * {flex-grow:1}
}

@media screen and (max-width:700px)
{
	div.PhotoContainer { justify-content: space-around; }
	div.PhotoContainer > a:only-of-type {flex-grow:1}
}