@charset "UTF-8";
/* CSS Document */
*{
    margin: 0;
    padding:0;
}
#wrapper{
    max-width:1280px;
    margin: 0 auto;
    font-family: 'Long Cang', cursive;
}
h1, footer{
    font-weight:normal;
    text-align:center;
    font-size:2.5em;
}
footer{
    font-size:1.5em;
}
.photos{
    margin: 0.5em 5px 2em;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 40px;
    grid-auto-flow: dense;
    grid-gap:5px;
}
.s3{
    grid-row: span 3; /* 120 */
}
.s4{
    grid-row: span 4; /* 160 */
}
.s5{
    grid-row: span 5; /* 200 */
}
.s6{
    grid-row: span 6; /* 240 */
}
.photos>div{
      display: flex;
      height: 100%;
      width: 100%;
      grid-column: span 1;
}
.photos img{
    width:100%;
    height:auto;
    -o-object-fit: cover;
     object-fit: cover;
    cursor:pointer;
}
#lightbox{
    width:100vw;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(40,40,40,0.9);
    display:none;
}
#big{
    width:70vw;
    margin:1em auto;
    padding:0.5%;
    background-color:#FFF;
    display:grid;
    grid-template:repeat(3, auto) / repeat(3, auto) ;
}
#big img{
    width:100%;
    height:auto;
    display:block;
    grid-area: 1 / 1 / -1 / -1;
}
.i{
    background-color:rgba(40,40,40,0.5);
    width:4em;
    border-radius:2em;
    text-align:center;
    grid-row:2/3;
    cursor:pointer;
}
.left{
    grid-column:1/2;
}
.right{
    grid-column:3/-1;
    justify-self:end;
}
#lightbox i{
    font-size:4em;
    color:rgba(200,200,200,0.5);
}