
.photo_icon{display:flex; align-items:center; padding: 8px;background: rgba(237, 240, 246, 0.6);border-radius: 6px;gap: 12px; margin-bottom:40px}
.photo_icon li{flex:1 1 auto}
.photo_icon li a{white-space:nowrap; display:block; text-align:center; padding: 8px 16px;background: #FFFFFF;border-radius: 3px;font-weight: 300;font-size: 16px;line-height: 1.6;color: #616B8A;}
.photo_icon li:hover a{background: #006CB5;color:#fff; box-shadow: 0px 4px 4px rgba(57, 111, 155, 0.34)}



.true-masonry-grid{column-count: 3; column-gap: 16px; width: 100%}
.masonry-item{break-inside: avoid; margin-bottom: 8px; border-radius: 6px; overflow: hidden; position: relative; display: inline-block; width: 100%}
.masonry-image{width: 100%; position: relative}
.masonry-image img{width: 100%; height: auto; display: block; border-radius: 6px}
.photo-zoom{display: block; width: 100%; text-decoration: none; color: inherit; cursor: pointer}
.masonry-item{opacity: 0; animation: fadeInUp 0.5s ease forwards}
@keyframes fadeInUp{
	from{opacity: 0; transform: translateY(20px)}
    to{opacity: 1; transform: translateY(0)}
}
.masonry-item:nth-child(1) { animation-delay: 0.1s; }
.masonry-item:nth-child(2) { animation-delay: 0.2s; }
.masonry-item:nth-child(3) { animation-delay: 0.3s; }
.masonry-item:nth-child(4) { animation-delay: 0.4s; }
.masonry-item:nth-child(5) { animation-delay: 0.5s; }
.masonry-item:nth-child(6) { animation-delay: 0.6s; }
.masonry-item:nth-child(7) { animation-delay: 0.7s; }
.masonry-item:nth-child(8) { animation-delay: 0.8s; }
.masonry-item:nth-child(9) { animation-delay: 0.9s; }
.masonry-item:nth-child(10) { animation-delay: 1.0s; }


@media (max-width: 1359px){
	.true-masonry-grid{column-gap: 12px}
    .masonry-item{margin-bottom: 12px}
	.photo_icon{padding: 6px;gap: 10px; margin-bottom:30px}
	.photo_icon li a{padding: 8px 16px;font-size: 15px;}
}
@media (max-width: 991px){
	.true-masonry-grid{column-count: 2; column-gap: 10px}
    .masonry-item{margin-bottom: 5px}
	.photo_icon{padding: 4px;gap: 8px; margin-bottom:20px}
	.photo_icon li a{padding: 8px; font-size: 14px;}
}

@media (max-width: 767px){
	.true-masonry-grid{column-gap: 8px}
    .masonry-item{margin-bottom: 2px; border-radius: 6px}
    .masonry-image img{border-radius: 6px}
	.photo_icon{flex-wrap:wrap}
}

@media (max-width: 480px){
	.true-masonry-grid{column-count: 1; column-gap: 0}
    .masonry-item{margin-bottom: 4px; max-width: 100%; margin-left: auto; margin-right: auto; }
}


   
 