@media (width >= 720px) {
    .view-photos{
	display:grid;
	grid-template-rows: repeat(5,12.5dvw);
	grid-template-columns: repeat(8,12.5dvw);
    }
    .control{
	position:absolute;
	z-index: 10;
	height:10px;
	width:12dvw;
    }
    .control span {
	z-index: 10;
	background:red;
	color:white;
	font-size:70%;
    }
}
@media (width < 720px) {
    .view-photos{
	display:grid;
	grid-template-rows: repeat(5,25dvw);
	grid-template-columns: repeat(4,25dvw);
    }
    .control{
	position:absolute;
	z-index: 10;
	height:10px;
	width:24.5dvw;
    }
    .control span {
	z-index: 10;
	background:red;
	color:white;
	font-size:40%;
    }
}
.view-photos>.page {
    width:100%;
    padding:5pt;
    border:solid 1px black;
    border-radius:5pt;
}
.view-photos img {
    width:80%;
}
.enlarged .control{
    width:95.5dvw;
}

.enlarged .control span {
    font-size: 100%
}
.control span.title{
    background:white;
    color:black;
    position: absolute;
    right:0px;
    font-style:italic;
}
.shrink {display: none;}
.page-frame.enlarged .shrink {display:inline;}
.page-frame.enlarged .enlarge, body.enlarged .enlarge {display:none;}
.page-frame {
    border:black solid 1px;
    border-radius:5px;
    padding:1%;
}
.page-frame.enlarged {
    position: absolute;
    z-index:20;
    left:0px;
    top:0px;
    width:100dvw;
    height:100dvw;
}
.page-frame img {
    width: 98%;
}
.page-frame.enlarged img.thumbnail {
    display:none;
}
.page-frame img.enlarged {
    display:none;
}
.page-frame.enlarged img.enlarged {
    display:block;
}