img { max-width: 90vw; }
#gridbox {
    display: grid; 
    background-color: #000000aa;
    margin: auto; 
    width: 60em;
    max-width: 90vw;
    padding: 0.5em;
    gap: 0.5em;
    align-items: top;
    overflow: visible;
}
.home_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: auto; 
    width: min(80em,calc(100vw - 2em));
    gap: 0.5em;
    overflow: vjisible;
    justify-content: center;
}
.home_img_container img { width: 100%; height: 100%; object-fit: contain }
.home_img_container { 
    aspect-ratio: 1 / 1;
    width:100%;
    /* height: 100%; */
    margin:auto; overflow: hidden; 
    box-sizing: border-box; 
    border-style: solid; 
    border-color: #00000000;
    border-width: 2pt;
}
.home_img_container:hover {border-color: yellow;}
@media screen and (width <= 60em) {
    #gridbox
    {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
        justify-content: center;
    }
    .home_grid { grid-template-columns: repeat(3, 1fr);}
}
.next_prev_box {
    width: min(20em, calc(100vw - 2em)); margin: auto;
    display: grid;
    grid-template-columns: repeat(11,1fr);
    gap: 0.5em;
    align-items: center;
    /* font-size: 2em; */
}
.next_prev_box a {
    font-family: "Azula", sans-serif;
    font-size: 1.25em;
    text-align: center
}
.next_prev_box .blank {
    font-family: "Impact", sans-serif;
    font-size: 1.75em;
    text-align: center
}
.next_prev_box .hand {
}
.next_prev_box .hand img { width: 100% }
.hand_np { width: 100%; transform: scale(1.25); }
.inactive { filter: grayscale(1) opacity(0.5) }