*,
::after,
::before {
  box-sizing: border-box;
}
#photo_popups {
  padding: 5px;
  max-width: 1080px;
  margin: 0 auto;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.photoitems {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 5px !important;
}
.fit_img {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  padding-bottom: 100%;
  display: block;
  overflow: hidden;
}
.fit_img:before {
  content: "\2b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  opacity: 0;
  z-index: 1;
  color: white;
  -webkit-transition: 0.15s cubic-bezier(0.1, 0.1, 1, 1);
  -moz-transition: 0.15s cubic-bezier(0.1, 0.1, 1, 1);
  transition: 0.15s cubic-bezier(0.1, 0.1, 1, 1);
}
.fit_img img {
  position: absolute;
  -webkit-transition: 0.15s cubic-bezier(0.1, 0.1, 1, 1);
  -moz-transition: 0.15s cubic-bezier(0.1, 0.1, 1, 1);
  transition: 0.15s cubic-bezier(0.1, 0.1, 1, 1);
  transform: scale(1.01);
  width: 100%;
  height: 100%;
  object-fit: cover;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.fit_img:hover:before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.fit_img:hover img {
  opacity: 0.1;
  transform: scale(1.06);
}

.mfp-zoom-out-cur header {
  width: calc(100% - 10px);
}
.mfp-zoom-in .mfp-with-anim {
  opacity: 0;
  transition: 0.2s ease-in-out;
  transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
  opacity: 0;
  transition: 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 1;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
  transform: scale(0.8);
  opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
}
/* Also add below links 
<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup/dist/magnific-popup.css"> */