.gallery {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;

}

.gallery-active {

  color: #fff;

  background-color: #ed1b24;

}

.gallery-img-frame {

  position: relative;

}

.gallery-img-frame img {

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  border-radius: 10px;

}

.gallery-item {

  max-width: 320px;

  width: 100%;

  height: 400px;

  margin: 10px 10px;

  position: relative;

  opacity: 0;

  transform: scale(0);

  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}



.gallery-item:hover {

  transform: scale(1.05) !important;

  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.47);

  z-index: 2;

}



.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.my-container {

  overflow: hidden;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 20px;

  margin-bottom: 20px;

}

.album-container {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 20px;

  margin-top: 20px;

  margin-bottom: 20px;

}