/* Gallery styling */

section[name="gallery"] {
    background: none;
    text-align: center;
}

#gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

section[name="gallery"] .title {
    position: relative;
    top: -25px;
    left: -26px;
    right: -25px;
    width: calc(100% + 22px);
    padding: 15px;
    background: var(--card-color);
}

/* Cards */

.galcard {
    aspect-ratio: 1 / 1;
    width: 95%;
    justify-self: center;
    padding: 7px;
    overflow: hidden;
}

.galpic {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
}

.galname {
    aspect-ratio: 1 / 1;
    width: calc(100%);

    z-index: 2;
    position: relative;
    top: -100%;
    font-size: 1.3em;

    opacity: 0;
    transition: 0.5s;
}

.galname span {
    padding-bottom: 5px;
}

.galname:hover {
    color: var(--accent-clr);
    background: var(--card-color);
    opacity: 0.5;
    user-select: none;
}

/* Modal */

#modal {
    display: none;
    z-index: 5;

    position: fixed;
    top: 10px;

    width: 70%;
    height: 90vh;
    justify-self: center;

    background: var(--card-color);
    padding: 20px;
    box-shadow: #000 1px 1px 5px;

    overflow-y: auto;
}

#modalExit {
    padding: 3px;
    width: 20px;
    margin: auto;
    user-select: none;
}
#modalExit:hover { background: var(--accent-clr); color: var(--body-color); }

#modalTitle { margin: 5px; }

#modalImg {
    max-width: calc(100% - 25px);
    max-height: 75vh;
}

#modalDesc { margin: 5px; }


@media only screen and (max-width: 950px) {
    #modal { width: 90%; }
}
@media only screen and (max-width: 800px) {
    #gallery { grid-template-columns: 1fr 1fr; } }
@media only screen and (max-width: 500px) {
    #gallery { grid-template-columns: 1fr;}
    #modal { max-width: 100%; }
}