.frame {
    position: relative; /* Change from absolute to relative */
    width: 100%; /* Adjust to 100% width of the column */
    height: 88%; /* Adjust to 100% height of the column */
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background: #fff;
    color: #fff;
    font-family: "Open Sans", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  
.pics {
    padding: 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center; /* Ensures the images align in the center */
}
  
.pics .pic {
    position: relative;
    margin: 2px;
    flex: 1 0 30%; /* Adjust this to control the number of images per row */
    cursor: pointer;
    background: #000;
    -webkit-animation: small 0.5s ease-in-out both;
    animation: small 0.5s ease-in-out both;
    transition: transform 0.5s ease-in-out, z-index 0s linear 0.5s;
}
  
.pics .pic.active {
    -webkit-animation: big 0.5s ease-in-out both;
    animation: big 0.5s ease-in-out both;
}
  
.pics .pic img {
    width: 100%;
    height: 100%; /* Adjust to cover the entire container */
    object-fit: contain; /* Ensures the image covers the container without distortion */
    transition: opacity 0.5s ease-in-out;
}
  
.pics .pic.away img {
    opacity: 0;
}
  
.pics .pic-1 { transform-origin: 0% 0%; }
.pics .pic-2 { transform-origin: 50% 0%; }
.pics .pic-3 { transform-origin: 100% 0%; }
.pics .pic-4 { transform-origin: 0% 50%; }
.pics .pic-5 { transform-origin: 50% 50%; }
.pics .pic-6 { transform-origin: 100% 50%; }
.pics .pic-7 { transform-origin: 0% 100%; }
.pics .pic-8 { transform-origin: 50% 100%; }
.pics .pic-9 { transform-origin: 100% 100%; }
  
@-webkit-keyframes big {
    0%, 1% { transform: scale(1); z-index: 2; }
    100% { z-index: 2; transform: scale(3.0625); }
}
  
@keyframes big {
    0%, 1% { transform: scale(1); z-index: 2; }
    100% { z-index: 2; transform: scale(3.0625); }
}
  
@-webkit-keyframes small {
    0% { transform: scale(3.0625); z-index: 2; }
    99% { z-index: 2; transform: scale(1); }
    100% { z-index: 1; }
}
  
@keyframes small {
    0% { transform: scale(3.0625); z-index: 2; }
    99% { z-index: 2; transform: scale(1); }
    100% { z-index: 1; }
}