/* #rootcenter {
    width: 820px;
}

.gallery {
    display: grid;
    grid-template-columns: 400px 400px;
    grid-auto-rows: 400px;
    gap: 4px;
}

.nn { height: 400px; width: 400px; }
.nl { height: 400px; width: 800px; }
.ln { height: 800px; width: 400px; }
.ll { height: 800px; width: 800px; }

.nl, .ll { grid-column: span 2; }
.ln, .ll { grid-row: span 2; }
*/

#content {
    background: rgba(0, 0, 0, 0); /* gallery is special */
    color: white;
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

#gallery img {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(120, 0, 0);
    object-fit: cover;
    position: relative;
    transition: all 0.5s ease-out;
}

#gallery img:hover { 
    z-index: 2;
    border: 6px solid rgb(200, 0, 0);
    transform: scale(1.25) rotateY(5deg) rotateZ(-2deg);
    transform-style: preserve-3d;
}

/*
saved for a future idea 
    transform: scale(1.25) rotateY(180deg) rotateZ(-5deg) translateZ(39px);
*/