.my-gallery-frontend img {
  border-radius: 4px;
  object-fit: cover;
}

.my-gallery-preview img {
  border: 1px solid #ddd;
}





/* Single-post Galery*/



.lightbox-gallery {
	
  	display: grid;
  	gap: 8px;
  	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items:start;
}

/* Bloktaki "columns" ayarını manuel yöneteceğiz */
.lightbox-gallery.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
.lightbox-gallery.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
.lightbox-gallery.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
.lightbox-gallery.columns-5 {
  grid-template-columns: repeat(5, 1fr);
}
.lightbox-gallery.columns-6 {
  grid-template-columns: repeat(6, 1fr);
}




/* Küçük ekranlar için güvenlik */
@media (max-width: 600px) {
  .lightbox-gallery {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
	
.lightbox-gallery[class*="columns-"] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

}	
	
	
	
	
}



.lightbox-gallery a{
	position:relative;
}

.lightbox-gallery a figure{
	margin:0px !important;
}

.lightbox-gallery a::before {
    content: "";
    background: rgba(36, 50, 93, 0.6);
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    transition: all ease-in-out 0.3s;
    z-index: 2;
    opacity: 0;
}

.lightbox-gallery a::after {
    content: "+";
    position: absolute;
    top: 0;
    left: 0;
    transition: all ease-in-out 0.3s;
    z-index: 3;
    opacity: 0;
	color:#FFF;
	font-size:60px;
    width: 100%; /* Ensure it takes the full width */
    height: 100%; /* Ensure it takes the full height of the parent */
    display: flex;
    justify-content: center; /* Horizontally centers the text */
    align-items: center; /* Vertically centers the text */
	
	
}
.lightbox-gallery a:hover::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}
.lightbox-gallery a:hover::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
}

.lightbox-gallery a figure::before {
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    top: 35px;
    left: 35px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transition: all 0.5s ease 0s;
    z-index: 9994;
	opacity: 0;
}

.lightbox-gallery a:hover figure::before {
    top: 15px;
    left: 15px;
	opacity: 1;
}




.lightbox-gallery a figure::after {
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 35px;
    right: 35px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transition: all 0.5s ease 0s;
    z-index: 9994;
	opacity: 0;
}

.lightbox-gallery a:hover figure::after {
    bottom: 15px;
    right: 15px;
	opacity: 1;
}