Template:Gallery/styles.css

.ds li.gallerybox {
    max-width: 250px !important;
}

.ds li.gallerybox div.thumb {
    min-height: 375px;
    display: flex;
    align-items: center;
    background: var(--color-surface-3);
}


  .li.gallerybox::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Height of the fade effect */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none; /* Allows interactions with the image below */
    z-index: 1; /* Ensures the gradient overlay is on top of the image */
  }

ul.gallery.gallery.gallery {
    text-align: center;
}

li.gallerybox{
    position: relative;
    border-radius: 8px;
    margin: 0px 4px 40px 4px;
    background: var(--color-surface-2);
    max-width: 280px;
    padding: 0px 0px 15px 0px;
    box-shadow: var(--box-shadow-dialog);
}

li.gallerybox div.thumb {
   margin: 0px;
   border-radius: 8px 8px 0px 0px;
}

li.gallerybox div.thumb img {
    opacity: 0.95;

    border-radius: inherit;
}

div.gallerytext {
    font-size: small;
}

div.gallerytext > pre {
    margin-top: -22px !important;
    margin-bottom: -15px !important;
    font-family: inherit;
    color: #808080cf;
    border: none;
    overflow: hidden;
    font-size: inherit;
    background: none;
}

div.gallerytext p {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 8px;
}

/* fix the boxes arr */
.pc2 li.gallerybox div.thumb img {
    min-width: 278px;
    object-fit: fill;
    height: 210px;
}

/* box center */
.pc2 ul.mw-gallery-nolines li.gallerybox div.thumb {
    display: flex;
    align-items: center;
    background: var(--color-surface-3);
    border: 1px solid var(--color-surface-3);
}