.brpl_pagination {  /*list-style-type: none;  margin: 0;  padding: 0;*/
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    padding: 0;
    clear: both;
    border: 0;
    margin: 1px;

} 
.brpl_pagination  li  {  display: inline; margin: 0 5px 5px 0;
    border: 1px solid #d3ced2;
   padding: 0;
    float: left;
    display: inline;
    overflow: hidden;}
    .brpl_pagination  li span {  
   padding: 0.75em;
    }
.brpl_pagination  li.active  {  border-color: #4e4e4e;background: #4e4e4e;
    color: #ffffff;}
/***** My VIDEO GALLERY***/

/*
  The grid itself needs only 4 CSS declarations:
*/

.myGallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.myGallery img {
  width: 100%;
}

/*
  And here are some declarations for the image caption.
  Just hover over one of the last 5 images to see it.
*/

.myGallery .item {
  position: relative;
  overflow: hidden;


.myGallery .item img {
  vertical-align: middle;
}

.myGallery .caption {
  margin: 0;
  padding: 1em;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  transition: transform .5s;
  transform: translateY(100%);
  background: rgba(0, 0, 0, 0.4);
  color: rgb(255, 255, 255);
}

.myGallery .item:hover .caption {
  transform: translateY(0%);
}

h5.myvid-title {
color: green;
font:bold;
 width: 100%;
/*font: 400 1.5em/1.58 Vollkorn, serif; */
}
/*
  The rest is only styling for this example page
*/

@import url("https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;900&display=swap");

body {
  font: 400 1.5em/1.58 Vollkorn, serif;
}

h1,
p {
  text-align: center;
}

.myGallery {
  font-size: 1rem;
}