#close{
font-size: 2em;
font-weight: 800;
cursor: pointer;
color:#a470c9;
margin:auto;
background:none;
border:none;

}

/* image gallery */
#gallery {
    margin: var(--doublespacing) auto;
    text-align: center;
    line-height: 1.2em;
    font-size: .9em;
    display:grid;
    grid-template-columns: auto auto auto; 
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

#gallery img {
transition: 0.3s;
max-width: 100%;
max-height: 100%;
border-radius: 5px;
margin: auto;
object-fit: cover;
aspect-ratio: 1/1;
overflow: hidden;
display:block;
}

#gallery img:hover{
    opacity: .5;
}

figure {
    margin: var(--spacing) auto;
    break-inside: avoid;
}

/* lightbox */
#gallery img:hover {
    cursor: pointer;
}

#lightbox {
    border: none;
    outline: none;
}
#lightbox img {
  max-height:90vh;
  max-width:90vw;
}

::backdrop {
    backdrop-filter: blur(2px) brightness(80%);
}

#gallery:has(~ #lightbox:popover-open) {
    pointer-events: none;
}
/* makes the lightbox work on small screens, like phones */
@media only screen and (min-width: 600px) {
    #lightbox button {
        display: none;
    }
} 
@media only screen and (max-width: 600px) {
    #lightbox button {
        display: block;
        width:30px;
        height:30px;
        margin:10px auto;
    }
}