/* Album viewer (see script/ui/album.js), the arrows look like the gallery ones */
/* width:0 with min-width:100% keeps the album from widening the flex page layout, so the thumbnails scroll */
section.album {margin:1.5rem 0; outline:none; width:0; min-width:100%;}
section.album > h3 {margin:0 0 .5rem 0;}
section.album .albumView {position:relative; height:32rem; overflow:hidden; background-color:#10161c; line-height:0;}
section.album .albumOpen {display:block; width:100%; height:100%; cursor:zoom-in;}
section.album .albumImage {display:block; width:100%; height:100%; max-width:100%; object-fit:contain; transition:opacity .2s;}
section.album.loading .albumImage {opacity:.5;}
section.album .albumPrev,
section.album .albumNext {position:absolute; top:0; bottom:0; width:3em; border:none; padding:0; cursor:pointer; color:#337fed; background-color:rgba(255,255,255,.3); font-size:4rem; line-height:1;}
section.album .albumPrev {left:0;}
section.album .albumNext {right:0;}
section.album .albumPrev:hover,
section.album .albumNext:hover {color:white; text-shadow:0 0 .25em rgba(0,0,0,.5);}
section.album .albumImageTitle {margin:.5rem 0; min-height:1.2em; color:rgb(90,90,90);}
section.album .albumThumbs {position:relative; list-style:none; display:flex; gap:.35rem; margin:0; padding:0 0 .35rem 0; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth;}
section.album .albumThumbs > li {flex:none; width:7rem; border:.15rem solid transparent;}
section.album .albumThumbs > li.active {border-color:#1573ad;}
section.album .albumThumbs img {display:block; width:100%; height:5rem; object-fit:cover; filter:grayscale(70%) brightness(70%); transition:filter .2s;}
section.album .albumThumbs > li.active img,
section.album .albumThumbs img:hover {filter:none;}

@media (max-width: 40rem)
{
	section.album .albumView {height:16rem;}
	section.album .albumPrev,
	section.album .albumNext {width:2.25em; font-size:3rem;}
	section.album .albumThumbs > li {width:5rem;}
	section.album .albumThumbs img {height:3.5rem;}
}