body {
    background-image: url('grass/grass.png');
    background-size: cover;
    display: flex;
    height: calc(100vh - 1rem);
    justify-content: center;
}

div {
    display: flex;
    flex-direction: column;
    background: #ffffff3f;
    text-align: center;
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 0.5rem;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
}
div[data-h] {
    flex-direction: row;
}
div[data-noflex] {
    display: block;
}

div, div * {
    flex: 1;
    /* width: 100%; */
    /* height: auto; */
    max-width: calc(min(100vw, 100%) - 1rem);
    max-height: calc(min(100vh, 100%) - 1rem);
}

#grass-green {
    cursor: grab;
    /* height: auto; */
    /* max-width: 75vw;
    max-height: 50vh; */
}
#grass-green:is(:hover, :focus) {
    filter: brightness(1.2);
}
#grass-green:active {
    filter: brightness(1.4);
    cursor: grabbing;
}

#grass-green:focus {
    outline: 0.5em solid green;
    outline-offset: 0.25em;
}