@charset "utf-8";
/* =========================================================
  #posterSliderPage
========================================================= */

#posterSliderPage{
  background-color: #ffffff;
}

#posterSliderPage .pieceContainer { 
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 2.5rem 0 2.5rem;
}

#posterSliderPage .bannerImages { 
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#posterSliderPage .banner {
  flex: 0 0 calc(25% - 10px); /* Each item takes 25% width minus margin */
  margin: auto; /* Space between items */
  margin-bottom: 25px; /* Add margin to the bottom of each item */
  box-sizing: border-box; /* Include padding and border in the width */
}

#posterSliderPage .banner img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}


/* =========================================================
  #lightgallery
========================================================= */
.departmentContainer {
    max-width: var(--site-width);
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add some padding for spacing */
}

#lightgallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#lightgallery a {
    flex: 1 0 calc(25% - 20px); /* 4 columns with 10px gap */
    max-width: calc(25% - 20px);
    position: relative;
    overflow: hidden;
}

#lightgallery img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio and cover container */
}

@media (max-width: 959px) {
    #lightgallery a {
        flex: 1 0 calc(50% - 10px); /* 2 columns with 10px gap on smaller screens */
        max-width: calc(50% - 10px);
    }
}