#gallerycard {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3 ease;
}

html {
    background-color: var(--silver-100) !important;
}

#gallerycard:hover {
    filter: brightness(0.95);
}

.imgPreview {
    aspect-ratio: 16/9.5;
    width: 100%;
    object-fit: cover;
}

.textContainer {
    padding: 2rem;
}

.galleryGrid {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    column-count: 3;
    column-gap: 16px;
    overflow-y: scroll;
    break-inside: avoid;
}

.galleryGrid > * {
    break-inside: avoid-column;
    margin-bottom: 2rem;
}
.galleryGrid img {
    display: inline-block;
    width: 100%;
    border-radius: 0.2rem;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.galleryGrid img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.galleryContent {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: 93.2vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0;  /* remove any padding that might cause overflow */
}

.navbar {
    height: 3.8vh;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}