body{
    background:#121420;
}

.container{
    height:100%;
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    grid-auto-flow: dense;
    grid-gap:10px;
}
.vertical{
    grid-row:auto /span 3;
}
.horizontal{
    grid-column: auto /span 2;
    grid-row: auto /span 2;
}
.container img{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    cursor:pointer;
}

.textContainer{
    display: grid;
    justify-items:self-start;
}

h1{
    color:white;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


/* lightbox */

.lightboximage{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    position:fixed;
    top:50%;
    left:-50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    background:white;
    box-sizing: border-box;
    padding:30px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    opacity:0;
    transition:0.3s;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -ms-transition:0.3s;
    -o-transition:0.3s;
}
.lightboximage img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.lightboximage.active{
    opacity:1;
    left:50%;
}